Rendering Lists - key props

https://react.dev/learn/rendering-lists

Here, <Recipe {...recipe} key={recipe.id} /> is a syntax shortcut saying “pass all properties of the recipe object as props to the Recipe component”. You could also write each prop explicitly: .
Note that the key is specified on the itself rather than on the root

returned from Recipe. This is because this key is needed directly within the context of the surrounding array. Previously, you had an array of

s so each of them needed a key, but now you have an array of s. In other words, when you extract a component, don’t forget to leave the key outside the JSX you copy and paste.