React keys for an array of strings

Question

I have a question. How can I generate key for array of string? It is not object, in object I could put id and it would solve the problem. So what should I do in just array? Indexes as key is not a good practice so I am stuck.

const ingredients = ['rice', 'curry', 'chicken]



    {props.ingredients.map((ingredient) => (
                <Box>{ingredient}</Box>
          ))}

Answer 1

If you don't have any duplicate ingredients, using the ingredient name as the key would be fine.

{props.ingredients.map((ingredient) => (
    <Box key={ingredient}>{ingredient}</Box>
))}

If you will have duplicate ingredients, and you really care about getting the key right, you could use the index if the index won't change:

{props.ingredients.map((ingredient, i) => (
    <Box key={i}>{ingredient}</Box>
))}

(Using the index isn't universal bad practice, it's just only suitable for some situations)

If you could have duplicate ingredients and the index can change, and you really want to fix this, change it to an array of objects instead of an array of strings, with a uniquely identifying attribute on each object that you can use as a key.

Answer 2

const ingredients = ['rice', 'curry', 'chicken']
 
{props.ingredients.map((ingredient, index) => ( 
   <Box key={index}>{ingredient}</Box>
 ))}