React é uma biblioteca JavaScript popular para a criação de interfaces de usuário, amplamente utilizada por desenvolvedores em todo o mundo. Ela simplifica o processo de build de interfaces de usuário complexas, fornecendo componentes reutilizáveis e gerenciamento de estado.
Seja você um iniciante ou um desenvolvedor experiente usando o React, não é incomum ver mensagens de erro como “Objects Are Not Valid as a React Child”.
Neste artigo exploraremos as causas desse erro e forneceremos soluções que você pode usar para corrigi-lo.
O que causa o erro “Objects Are Not Valid as a React Child”?
O erro “Objects Are Not Valid as a React Child” é um erro comum na programação React. Ele ocorre quando um componente recebe um objeto como child em vez de um elemento React válido. A mensagem de erro geralmente é semelhante a esta:
A mensagem de erro indica que o componente recebeu um objeto em vez de um elemento child válido do React (como strings, números ou elementos do React, mas não arrays ou objetos). A principal causa desse erro é a passagem de um tipo de dados inválido e de dados não serializáveis como child.
1. Passando um objeto como child
export default function App() {
return (
<div>
{{ message: "Hello world!" }}
</div>
);
}Neste exemplo, o componente App tenta renderizar um objeto como um elemento child. Isso acionará o erro “Objects Are Not Valid as a React Child”, pois o React não reconhece objetos como elementos child válidos.
2. Passando dados não serializáveis como child
export default function App() {
const message = { text: "Hello world!" };
return (
<div>
{message}
</div>
);
}No código acima, o componente App tenta renderizar um tipo de dados não serializáveis (um objeto) como um elemento child. Isso acionará o erro “Objects Are Not Valid as a React Child”, pois o React exige que todos os elementos child sejam serializáveis.
3. Passando o array como child
export default function App() {
const students = [
{ name: 'John Doe', age: 12 },
{ name: 'Jane Doe', age: 14 },
];
const locale = {
state: 'Florida',
country: 'USA',
};
return (
<>
<span>{students}</span>
<div>{locale}</div>
</>
);
}Neste código, temos um array students e um objeto locale que estamos tentando renderizar como child. No entanto, passar um array ou um objeto como child não é válido no React — esse código acionará o erro “Objects Are Not Valid as a React Child”.
Como corrigir o erro “Objects Are Not Valid as a React Child”
Para corrigir esse erro, é importante lembrar que os arrays e os objetos são iteráveis no JavaScript. O JavaScript considera os arrays como um tipo especial de objeto, e é por isso que a mensagem de erro ainda será “Objects Are Not Valid as a React Child”, mesmo que o problema seja com um array.
Para acessar os dados em um array ou objeto, você pode iterar pelo array usando um loop, acessar elementos específicos usando seu número de índice, ou usar a notação de ponto para objetos.
Aqui estão algumas das soluções mais comuns:
1. Conversão de objetos em strings de caracteres ou números
Uma maneira de corrigir o erro é converter o objeto em uma string ou número antes de passá-lo como child. Por exemplo:
export default function App() {
const message = { text: "Hello world!" };
return (
<div>
{JSON.stringify(message)}
</div>
);
}Neste exemplo, convertemos o objeto message em uma string usando o método JSON.stringify() antes de passá-lo como um elemento child. Assim você evitará a ocorrência do erro “Objects Are Not Valid as a React Child”.
2. Renderização correta de arrays com o método map()
Outra causa comum do erro é o uso incorreto de arrays no React. Se você tentar renderizar um array diretamente como um elemento child, o erro “Objects Are Not Valid as a React Child” será acionado.
Em vez disso, você deve usar o método map() para converter cada item do array em um elemento child válido do React.
export default function App() {
const students = [
{ name: 'John Doe', age: 12 },
{ name: 'Jane Doe', age: 14 },
];
const locale = {
state: 'Florida',
country: 'USA',
};
return (
<>
{students.map((student, index) => (
<div key={index}>
<span>{student.name}</span>
<span>{student.age}</span>
</div>
))}
<div>
{locale.state}, {locale.country}
</div>
</>
);
}Neste código, usamos o método map() para iterar sobre o array students e converter cada elemento em um div que contém o nome e a idade do aluno. Também adicionamos uma key prop a cada elemento child para otimizar o desempenho da renderização.
3. Uso da renderização condicional para evitar a renderização de tipos de dados inválidos
Se você estiver passando dados que podem não ser válidos como child do React, pode usar a renderização condicional para evitar a ocorrência do erro.
function App() {
const message = { text: "Hello world!" };
return (
<div>
{typeof message === 'string' ? message : null}
</div>
);
}Neste exemplo, usamos a renderização condicional para renderizar a mensagem somente se ela for uma string. Assim você evitará a ocorrência do erro “Objects Are Not Valid as a React Child”.
Práticas recomendadas para evitar o erro “Objects Are Not Valid as a React Child”
Primeiramente, para evitar que o erro “Objects Are Not Valid as a React Child” ocorra, é importante que você siga as práticas recomendadas ao criar componentes React. Algumas das mais importantes incluem:
- Sempre passe elementos child válidos do React como children
- Evite passar dados não serializáveis como children
- Use renderização condicional para lidar com casos limite e tipos de dados inválidos
Resumo
Neste artigo, aprendemos como resolver o erro “Objects Are Not Valid as a React Child” em todos os cenários possíveis, e as práticas recomendadas para evitar que o erro ocorra.
É importante lembrar que os arrays são considerados um tipo especial de objeto; portanto, quando você não consegue fazer um loop em um array antes de renderizá-lo em seu aplicativo React, o erro “Objects Are Not Valid as a React Child” será lançado.
Se você tem um aplicativo React que deseja compartilhar com o mundo, confira o serviço de hospedagem de aplicativos da Kinsta. Você pode começar gratuitamente.
Compartilhe sua experiência! Você já encontrou esse problema antes? Se sim, como o resolveu? Você usou outra abordagem, não mencionada neste artigo? Por favor, conte para nós nos comentários.
