{"id":60175,"date":"2023-11-01T06:26:48","date_gmt":"2023-11-01T09:26:48","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=60175&post_type=knowledgebase&preview_id=60175"},"modified":"2025-10-01T17:00:55","modified_gmt":"2025-10-01T20:00:55","slug":"objects-are-not-valid-as-a-react-child","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/objects-are-not-valid-as-a-react-child\/","title":{"rendered":"Como Corrigir o Erro “Objects Are Not Valid as a React Child”"},"content":{"rendered":"

React \u00e9 uma biblioteca JavaScript<\/a> popular para a cria\u00e7\u00e3o de interfaces de usu\u00e1rio, amplamente utilizada por desenvolvedores<\/a> em todo o mundo. Ela simplifica o processo de build de interfaces de usu\u00e1rio complexas, fornecendo componentes reutiliz\u00e1veis e gerenciamento de estado.<\/p>\n

Seja voc\u00ea um iniciante ou um desenvolvedor experiente usando o React<\/a>, n\u00e3o \u00e9 incomum ver mensagens de erro como “Objects Are Not Valid as a React Child”.<\/p>\n

Neste artigo exploraremos as causas desse erro e forneceremos solu\u00e7\u00f5es que voc\u00ea pode usar para corrigi-lo.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

O que causa o erro “Objects Are Not Valid as a React Child”?<\/h2>\n

O erro “Objects Are Not Valid as a React Child” \u00e9 um erro comum na programa\u00e7\u00e3o React. Ele ocorre quando um componente recebe um objeto como child em vez de um elemento React v\u00e1lido. A mensagem de erro geralmente \u00e9 semelhante a esta:<\/p>\n

\"Erro
Erro “Objects Are Not Valid as a React Child”.<\/figcaption><\/figure>\n

A mensagem de erro indica que o componente recebeu um objeto em vez de um elemento child v\u00e1lido do React (como strings, n\u00fameros ou elementos do React, mas n\u00e3o arrays ou objetos). A principal causa desse erro \u00e9 a passagem de um tipo de dados inv\u00e1lido e de dados n\u00e3o serializ\u00e1veis como child.<\/p>\n

1. Passando um objeto como child<\/h3>\n
export default function App() {\n  return (\n    <div>\n      {{ message: \"Hello world!\" }}\n    <\/div>\n  );\n}<\/code><\/pre>\n
Neste exemplo, o componente App<\/strong> tenta renderizar um objeto como um elemento child. Isso acionar\u00e1 o erro “Objects Are Not Valid as a React Child”, pois o React n\u00e3o reconhece objetos como elementos child v\u00e1lidos.<\/p>\n
2. Passando dados n\u00e3o serializ\u00e1veis como child<\/h3>\n
export default function App() {\n  const message = { text: \"Hello world!\" };\n  return (\n    <div>\n      {message}\n    <\/div>\n  );\n}<\/code><\/pre>\n
No c\u00f3digo acima, o componente App<\/strong> tenta renderizar um tipo de dados n\u00e3o serializ\u00e1veis (um objeto) como um elemento child. Isso acionar\u00e1 o erro “Objects Are Not Valid as a React Child”, pois o React exige que todos os elementos child sejam serializ\u00e1veis.<\/p>\n
3. Passando o array como child<\/h3>\n
export default function App() {\n    const students = [\n        { name: 'John Doe', age: 12 },\n        { name: 'Jane Doe', age: 14 },\n    ];\n    const locale = {\n        state: 'Florida',\n        country: 'USA',\n    };\n    return (\n        <>\n            <span>{students}<\/span>\n            <div>{locale}<\/div>\n        <\/>\n    );\n}<\/code><\/pre>\n
Neste c\u00f3digo, temos um array students<\/code> e um objeto locale<\/code> que estamos tentando renderizar como child. No entanto, passar um array ou um objeto como child n\u00e3o \u00e9 v\u00e1lido no React \u2014 esse c\u00f3digo acionar\u00e1 o erro “Objects Are Not Valid as a React Child”.<\/p>\n
Como corrigir o erro “Objects Are Not Valid as a React Child”<\/h2>\n
Para corrigir esse erro, \u00e9 importante lembrar que os arrays e os objetos s\u00e3o iter\u00e1veis no JavaScript. O JavaScript considera os arrays como um tipo especial de objeto, e \u00e9 por isso que a mensagem de erro ainda ser\u00e1 “Objects Are Not Valid as a React Child”, mesmo que o problema seja com um array.<\/p>\n
Para acessar os dados em um array ou objeto, voc\u00ea pode iterar pelo array usando um loop, acessar elementos espec\u00edficos usando seu n\u00famero de \u00edndice, ou usar a nota\u00e7\u00e3o de ponto para objetos.<\/p>\n
Aqui est\u00e3o algumas das solu\u00e7\u00f5es mais comuns:<\/p>\n
1. Convers\u00e3o de objetos em strings de caracteres ou n\u00fameros<\/h3>\n
Uma maneira de corrigir o erro \u00e9 converter o objeto em uma string ou n\u00famero antes de pass\u00e1-lo como child. Por exemplo:<\/p>\n
export default function App() {\n  const message = { text: \"Hello world!\" };\n  return (\n    <div>\n      {JSON.stringify(message)}\n    <\/div>\n  );\n}<\/code><\/pre>\n
Neste exemplo, convertemos o objeto message<\/code> em uma string usando o m\u00e9todo JSON.stringify()<\/code> antes de pass\u00e1-lo como um elemento child. Assim voc\u00ea evitar\u00e1 a ocorr\u00eancia do erro “Objects Are Not Valid as a React Child”.<\/p>\n
2. Renderiza\u00e7\u00e3o correta de arrays com o m\u00e9todo map()<\/h3>\n
Outra causa comum do erro \u00e9 o uso incorreto de arrays no React. Se voc\u00ea tentar renderizar um array diretamente como um elemento child, o erro “Objects Are Not Valid as a React Child” ser\u00e1 acionado.<\/p>\n
Em vez disso, voc\u00ea deve usar o m\u00e9todo map()<\/code> para converter cada item do array em um elemento child v\u00e1lido do React.<\/p>\n
export default function App() {\n    const students = [\n        { name: 'John Doe', age: 12 },\n        { name: 'Jane Doe', age: 14 },\n    ];\n    const locale = {\n        state: 'Florida',\n        country: 'USA',\n    };\n    return (\n        <>\n            {students.map((student, index) => (\n                <div key={index}>\n                    <span>{student.name}<\/span>\n                    <span>{student.age}<\/span>\n                <\/div>\n            ))}\n            <div>\n                {locale.state}, {locale.country}\n            <\/div>\n        <\/>\n    );\n}<\/code><\/pre>\n
Neste c\u00f3digo, usamos o m\u00e9todo map()<\/code> para iterar sobre o array students<\/code> e converter cada elemento em um div<\/code> que cont\u00e9m o nome e a idade do aluno. Tamb\u00e9m adicionamos uma key prop a cada elemento child para otimizar o desempenho da renderiza\u00e7\u00e3o.<\/p>\n
3. Uso da renderiza\u00e7\u00e3o condicional para evitar a renderiza\u00e7\u00e3o de tipos de dados inv\u00e1lidos<\/h3>\n
Se voc\u00ea estiver passando dados que podem n\u00e3o ser v\u00e1lidos como child do React, pode usar a renderiza\u00e7\u00e3o condicional<\/a> para evitar a ocorr\u00eancia do erro.<\/p>\n
function App() {\n  const message = { text: \"Hello world!\" };\n  return (\n    <div>\n      {typeof message === 'string' ? message : null}\n    <\/div>\n  );\n}<\/code><\/pre>\n
Neste exemplo, usamos a renderiza\u00e7\u00e3o condicional para renderizar a mensagem somente se ela for uma string. Assim voc\u00ea evitar\u00e1 a ocorr\u00eancia do erro “Objects Are Not Valid as a React Child”.<\/p>\n
Pr\u00e1ticas recomendadas para evitar o erro “Objects Are Not Valid as a React Child”<\/h3>\n
Primeiramente, para evitar que o erro “Objects Are Not Valid as a React Child” ocorra, \u00e9 importante que voc\u00ea siga as pr\u00e1ticas recomendadas<\/a> ao criar componentes React. Algumas das mais importantes incluem:<\/p>\n