[Bug] Each child in a list should have a unique "key" prop

O erro que você está vendo é um aviso do React que indica que cada elemento filho em uma lista renderizada por meio de um mapeamento deve ter uma propriedade "key" única. Isso é necessário para ajudar o React a identificar e rastrear os elementos de forma eficiente durante as atualizações.

Para corrigir o erro, você precisa adicionar a propriedade "key" aos elementos

• gerados pelo mapeamento. A propriedade "key" deve ser uma identificação única para cada elemento da lista. Neste caso, como você está usando o índice do array como o valor exibido, pode usá-lo como a propriedade "key" também.

Aqui está o código corrigido:

import './estilo.css';

const textOpcoes = ['Categorias', 'favoritos', 'minha estante'];

export default function OpcoesHeader() {
  return (
    <ul className='opcoes'>
      {textOpcoes.map((texto, index) => (
        <li key={index} className='opcao'>
          <p>{texto}</p>
        </li>
      ))}
    </ul>
  );
}

Neste exemplo, a propriedade "key" é definida como {index} dentro do loop de mapeamento. Isso garante que cada elemento gerado tenha uma chave única com base no seu índice no array textOpcoes.

Certifique-se de que a propriedade "key" seja única para cada elemento filho da lista. Isso ajudará o React a identificar e atualizar corretamente os elementos durante as alterações de estado.

Espero que isso resolva o problema! Se você tiver mais dúvidas, é só me perguntar.

Olá, Gerson, eu já havia perguntado para o chatGPT anteriormente, ele me respondeu isso. Mas não obtive resultados, por isso perguntei aqui... afinal, estou usando a mesma versão do Nodejs que o professor e para ele não apareceu esse erro, então é isso que eu gostaria de entender melhor...

Com a solução do ChatGPT o erro some, porém ainda não aparece a lista <li> no template. Eu percebi também que logo no inicio do curso ao rodar o comando npx create-react-app . me gerou alguns avisos (criei um post inclusive: https://cursos.alura.com.br/forum/topico-duvida-comando-npx-create-react-app-307376) Mas não consegui entender se foram esses avisos que me travou agora...

Descobri o problema: Provavelmente o professor enfrentou sim o mesmo problema, porém ele não mostrou o console.

O motivo do erro child in a list should have a unique "key" prop. era aquilo que o ChatGPT tinha informado, precisava usar a key={index}. O motivo de não aparecer a <li> foi por conta da falta do return no componente.

Errado:

export default function OpcoesHeader(){
    <ul className='opcoes'>
    {  textOpcoes.map( (texto) => (
        <li className='opcao'><p>{texto}</p></li>
      ) ) 
    }
  </ul>
}

Certo

export default function OpcoesHeader(){
  return(
    <ul className='opcoes'>
    {  textOpcoes.map( (texto, index) => (
        <li key={index} className='opcao'><p>{texto}</p></li>
      ) ) 
    }
  </ul>
  )
}