javascript - Llaves de React para un arreglo de cadenas

Tengo una pregunta. ¿Cómo puedo generar una clave para un array de cadenas? No es un objeto, en un objeto podría poner id y eso resolvería el problema. Entonces, ¿qué debería hacer solo con un array? Los índices como clave no son una buena práctica, así que estoy atrapado.

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



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

Respuesta #1

Si no tienes ingredientes duplicados, usar el nombre del ingrediente como clave estaría bien.

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

Si vas a tener ingredientes duplicados, y realmente te importa acertar con la clave, podrías usar el índice si el índice no va a cambiar:

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

(Usar el índice no es una mala práctica universal, solo es adecuado para algunas situaciones)

Si pudieras tener ingredientes duplicados y el índice puede cambiar, y realmente quieres arreglar esto, cámbialo a un arreglo de objetos en lugar de un arreglo de cadenas, con un atributo identificador único en cada objeto que puedas usar como clave.

Respuesta #2

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