O key serve para fazer a ligação do react com o dom real mas quando o key deve ser usado? apenas para listas? ou qualquer outro componente que se repete? o key foi passado dentro do pelo fato do index ser passado pelo map certo? Então é correto assumir que o key é passado direto para filho direto do elemento que for retornado? e quando não for usado o map e não existir uma forma de colocar o index automatico como seria feito a declaração do key?
hoje, com a Alura e o Google Gemini
Olá, Sung Ju!
Geralmente renderizamos listas dentro de componentes no React. O key é um atributo string especial que você precisa definir ao criar listas de elementos. As keys ajudam o React a identificar quais itens sofreram alterações, foram adicionados ou removidos. As chaves devem ser atribuídas aos elementos dentro do array para dar uma identidade estável aos elementos:
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);A melhor forma de escolher uma key é usar uma string que identifica unicamente um item da lista dentre os demais. Na maioria das vezes usamos IDs dos dados como chave:
const todosOsItems = todos.map((item) =>
<li key={item.id}>
{item.text}
</li>
);É possível usar o index do próprio método map():
onst todoItems = todos.map((todo, index) =>
// Apenas faça isso caso os itens não possuam IDs estáveis
<li key={index}>
{todo.text}
</li>
);Contudo isso não é recomendado pois não é uma identidade estável dos itens, já que estes podem mudar.
Você pode ler mais sobre keys neste link
Bons estudos!