Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

ERRO ESLINT: error Missing "key" prop for element in iterator

Referente ao curso React: conhecendo a biblioteca React Router, no capítulo O que é SPA? e atividade Criando o início

por Wellington Bonjardim
| 49k xp | 25 posts
Professor de Matemática

Boa tarde,

como posso corrigir o erro "src\pages\Cardapio\Itens\index.tsx Line 50:9: Missing "key" prop for element in iterator react/jsx-key" ?

O techo ao qual ele se refere é esse:

return (
    <div className={styles.itens}>
      {lista.map(item => (
        <div>
          <Item 
            key={item.id} 
            {...item}  
          />
        </div>
      ))}
    </div>
  );

Eu entendi que tenho que passar a "key" como prop, mas como fazer isso que me deixou com dúvida

1 resposta
solução!
por Wellington Bonjardim
| 49k xp | 25 posts
Professor de Matemática

POSSÍVEL SOLUÇÃO: Depois de pesquisar, vi que nesse caso a key deve ser colocada no elemento externo ao componente, nesse caso na div. Então ao fazer a alteração abaixo, o erro sumiu e o projeto voltou a rodar:

return (
    <div className={styles.itens}>
      {lista.map(item => (
        <div key={item.id} >
          <Item 
            {...item}  
          />
        </div>
      ))}
    </div>
  );