{"id":70139,"date":"2023-06-13T10:26:45","date_gmt":"2023-06-13T09:26:45","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=70139&post_type=knowledgebase&preview_id=70139"},"modified":"2025-10-01T20:43:25","modified_gmt":"2025-10-01T19:43:25","slug":"objects-are-not-valid-as-a-react-child","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/objects-are-not-valid-as-a-react-child\/","title":{"rendered":"Come Risolvere l’Errore “Objects Are Not Valid as a React Child”"},"content":{"rendered":"

React \u00e8 una libreria JavaScript<\/a> per la creazione di interfacce utente ampiamente utilizzata da sviluppatrici e sviluppatori<\/a> di tutto il mondo. Permette di creare interfacce utente complesse grazie a componenti riutilizzabili e gestione dello stato.<\/p>\n

React<\/a> \u00e8 utilizzata sia da principianti che da sviluppatori esperti, e non \u00e8 raro vedere messaggi di errore come “Objects Are Not Valid as a React Child”<\/p>\n

In questo articolo analizzeremo le cause di questo errore e forniremo le soluzioni per risolverlo.<\/p>\n

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

Quali sono le cause dell’errore “Objects Are Not Valid as a React Child”?<\/h2>\n

L’errore “Objects Are Not Valid as a React Child” \u00e8 un errore frequente nella creazione di applicazioni React. Si verifica quando un componente riceve un oggetto come child invece di un elemento React valido. Il messaggio di errore di solito appare cos\u00ec:<\/p>\n

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

Il messaggio di errore viene emesso quando il componente ha ricevuto un oggetto invece di un elemento child React valido (come stringhe, numeri o elementi React, ma non array o oggetti). In pratica, viene passato un tipo di dati non valido o di dati non serializzabili come child.<\/p>\n

1. Oggetto come child<\/h3>\n
export default function App() {\n  return (\n    <div>\n      {{ message: \"Hello world!\" }}\n    <\/div>\n  );\n}<\/code><\/pre>\n
In questo esempio, il componente App<\/strong> cerca di rendere un oggetto come elemento child. In questo modo si verifica l’errore “Objects Are Not Valid as a React Child”, poich\u00e9 React non riconosce gli oggetti come elementi child validi.<\/p>\n
2. Dati non serializzabili come 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
Nel codice qui sopra, il componente App<\/strong> cerca di rendere un tipo di dati non serializzabile (un oggetto) come elemento child. In questo caso viene emesso l’errore “Objects Are Not Valid as a React Child” perch\u00e9 React richiede che tutti gli elementi child siano serializzabili.<\/p>\n
3. Passare un array come 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
In questo codice, abbiamo un array students<\/code> e un oggetto locale<\/code> che stiamo cercando di rendere come child. Tuttavia, passare un array o un oggetto come child non \u00e8 valido in React: questo codice genera l’errore “Objects Are Not Valid as a React Child”.<\/p>\n
Come risolvere l’errore “Objects Are Not Valid as a React Child”?<\/h2>\n
Per risolvere questo errore, \u00e8 importante ricordare che gli array e gli oggetti sono iterabili in JavaScript. JavaScript considera gli array come un tipo speciale di oggetto, per cui il messaggio di errore continuer\u00e0 a riportare “Objects Are Not Valid as a React Child” anche se il problema riguarda un array.<\/p>\n
Per accedere ai dati di un array o di un oggetto, \u00e8 possibile iterare l’array utilizzando un ciclo, accedere a elementi specifici utilizzando l’indice o utilizzare la notazione a punti per gli oggetti.<\/p>\n
Ecco alcune soluzioni:<\/p>\n
1. Convertire gli oggetti in stringhe o numeri<\/h3>\n
Un modo per risolvere l’errore \u00e8 quello di convertire l’oggetto in una stringa o in un numero prima di passarlo come child. Ad esempio:<\/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
In questo esempio, convertiamo l’oggetto message<\/code> in una stringa utilizzando il metodo JSON.stringify()<\/code> prima di passarlo come elemento child. In questo modo si evita che si verifichi l’errore “Objects Are Not Valid as a React Child”.<\/p>\n
2. Rendering corretto degli array con il metodo map()<\/h3>\n
Un’altra causa comune dell’errore \u00e8 l’uso scorretto degli array. Se si prova a renderizzare un array direttamente come elemento child, si verificher\u00e0 l’errore “Objects Are Not Valid as a React Child”.<\/p>\n
Dovreste invece utilizzare il metodo map()<\/code> per convertire ogni elemento dell’array in un elemento child valido.<\/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
In questo codice, utilizziamo il metodo map()<\/code> per iterare l’array students<\/code> e convertire ogni elemento in un div<\/code> contenente il nome e l’et\u00e0 dello studente. Aggiungiamo anche una propriet\u00e0 key a ogni elemento child per ottimizzare le prestazioni di rendering.<\/p>\n
3. Usare il rendering condizionale per evitare il rendering di tipi di dati non validi<\/h3>\n
Se state passando dei dati che potrebbero non essere validi come child di React, potete utilizzare il rendering condizionale per evitare che si verifichi l’errore.<\/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
In questo esempio, utilizziamo il rendering condizionale solo per rendere il messaggio se il tipo \u00e8 una stringa. In questo modo eviteremo che si verifichi l’errore “Objects Are Not Valid as a React Child”.<\/p>\n
Best practice per prevenire l’errore “Objects Are Not Valid as a React Child”<\/h3>\n
Per evitare che l’errore “Objects Are Not Valid as a React Child” si verifichi, \u00e8 importante seguire le best practice<\/a>. Tra le pi\u00f9 importanti ricordiamo:<\/p>\n