2

Estou tentando criar um jogo de xadrez usando React. Tô indo muito bem, exceto por este erro. Este é meu código:

import "./style.css";

function App() {

  const squares = []; //squares order

  for (var i=0; i<8; i++) {

  for (var j=0; j<8; j=j+2) { //appending squares rows starting with a white square
    squares.push('sqr w')
    squares.push('sqr b')
  }

  for (var h=0; h<8; h=h+2) { //appending squares rows starting with a black square
    squares.push('sqr b')
    squares.push('sqr w')
  }}

//create square component
  const squareItem = squares.map(square => {
    return (
      <div className={square}/>
    )
  })

  return (
    <div className="tab">
        {squareItem}
    </div>
  );
}

export default App;

A mensagem de erro é esta: Warning: Each child in a list shoud have a unique "key" prop

O que eu faço?

1

1 Resposta 1

1

Para resumir, o React pede que seja passado uma prop key para todo componente que esteja dentro de uma lista.

Segundo a própria documentação do React

As chaves 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:

no seu caso basta fazer dessa forma:

const squareItem = squares.map((square, index) => {
    return (
      <div key={index} className={square}/>
    )
  })

Referências:

Listas e Chaves - React

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .