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>
          ))}

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>
          ))}

• javascript
• reactjs
• typescript

4 Answers 4

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.

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

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

You get an index built in when doing it like this and can use it as they key.

When you use map, it's better to specify key for selected ponent inside map function. first parameter in map function is value from given list and second one is index of item in list. you can name second parameter as whatever you want and pass it as key to ponent like this:

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