1
resposta

ERROR Error: Objects are not valid as a React child

Boa noite pessoal,

Estou com esse erro no projeto, será que alguêm consegue me ajudar?

 ERROR  Error: Objects are not valid as a React child (found: object with keys {topo, detalhes, itens}). If you meant to render a collection of children, use an array instead.
 
 Desde já agradeço.
 
 
1 resposta

Olá Aleir!

Esse erro geralmente ocorre quando você está tentando renderizar um objeto como um filho em um componente React. A mensagem de erro sugere que você use um array em vez de um objeto.

No seu caso, parece que você está tentando renderizar um objeto com as chaves {topo, detalhes, itens}. Para resolver esse problema, você precisa transformar esse objeto em um array.

Aqui está um exemplo de como você pode fazer isso:

const dados = [
  { topo: 'Texto do topo', detalhes: 'Detalhes do item 1', itens: 'Itens do item 1' },
  { topo: 'Texto do topo', detalhes: 'Detalhes do item 2', itens: 'Itens do item 2' },
  { topo: 'Texto do topo', detalhes: 'Detalhes do item 3', itens: 'Itens do item 3' },
];

const Componente = () => {
  return (
    <div>
      {dados.map((item, index) => (
        <div key={index}>
          <h1>{item.topo}</h1>
          <p>{item.detalhes}</p>
          <p>{item.itens}</p>
        </div>
      ))}
    </div>
  );
};

Nesse exemplo, eu criei um array chamado dados com três objetos. Em seguida, usei o método map para percorrer esse array e renderizar cada objeto como um componente.

Espero que isso ajude a resolver o seu problema! Se tiver mais alguma dúvida, é só me dizer.

Espero ter ajudado e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software