I set the key={recipe.recipe.label} just like all the other props. But I get an error message saying Warning: Each child in a list should have a unique "key" prop. How do I fix this?
Yes, unless you have a good id value from the backend to use. Simplest way is just install uuid and probably use v4.
> npm install --save uuid
import uuid from "uuid/v4";
....
<MyComponent key={uuid} .........
....
I guess there will be some overhead from computing the uuids, but IME I’ve never been in a situation where it’s been an issue, and it’s always fixed any key problems I’ve had immediately
For you to be getting duplicate keys when they’re uuids, and I’m reading that error correctly, that means you’re generating a key then using that same key for multiple items, the chances of a collision are astronomically small otherwise. Need to see more code I think
Edit: ah, I see, if you copied my code verbatim, uuid is function, it need to be uuid(). If you just used uuid, you’re trying to set every key to the definition of a specific function. Note I just use uuids out of habit because I’m lazy and I can’t be bothered to do any thinking when I want a unique id, there are other very simple ways to create something semi unique without importing a lib