How to fix “Objects are not valid as a React child”

“Objects are not valid as a React child” appears when you are trying to render to the screen an object as a react child, this article will show you solutions along with detailed examples.

The reason for the error “Objects are not valid as a React child”

With an object, you cannot render it to the screen by passing its variable into the HTML code because React‘s mechanism prevents this. If you intentionally use and render Object as a React child, an error will appear like the example below.

Code:

import React from "react";

const App = () => {
    const users = [
        { id: 1, name: "John", age: 22 },
        { id: 2, name: "Tom", age: 21 },
        { id: 3, name: "Alice", age: 18 },
    ];

    return (
        <div>
            <h2>List of user:</h2>
            {users}
        </div>
    );
};

export default App;

Output:

The program can still recognize that in our Object, there are keys like id, name, and age, requiring us to render each value inside. The solutions to this error will be in the next part of the article.

How to fix this error

Using Array.map() to render

Because we need to render the information of an array of objects, we can use the map() method of the array to iterate over each of its interior elements. When rendering to the screen, we access each key of the Object that is traversed, for example, the name, and age of the user, like the code below.

Code:

import React from "react";

const App = () => {
  const users = [
    { id: 1, name: "John", age: 22 },
    { id: 2, name: "Tom", age: 21 },
    { id: 3, name: "Alice", age: 18 },
  ];

  return (
    <div>
      <h2>List of user:</h2>
      {users.map((user) => {
        return (
          <li key={user.id}>{"Name: " + user.name + "| Age: " + user.age}</li>
        );
      })}
    </div>
  );
};

export default App;

Output:

In the above code, we use the map method to iterate through each user inside the user’s array. Then access the user’s name and age values ​​to get the value and print it to the screen because the compiler doesn’t allow you to render complex values ​​like objects.

Using JSON.stringtify() 

JSON. stringify() is a classic function in Javascript to convert an Object to JSON. When we convert an Object to JSON, the program can recognize and render this value to the screen.

JSON stands for JavaScript Object Notation, a data format that follows a particular rule that most programming languages ​​can read today. JSON is an open standard for exchanging data on the web. Let’s see the example below to see how we fix this error.

Code:

import React from "react";

const App = () => {
  const users = [
    { id: 1, name: "John", age: 22 },
    { id: 2, name: "Tom", age: 21 },
    { id: 3, name: "Alice", age: 18 },
  ];

  return (
    <div>
      <h2>List of user:</h2>
      <p>{JSON.stringify(users)}</p>
    </div>
  );
};

export default App;

Output:

By using JSON.stringtify() on Object users, we could convert it to JSON form, render it to the screen, and prevent the error from appearing. Still, this way has a disadvantage: you will lose the properties of the array and the properties of the array or object input. Wish you success with the methods mentioned in the article

Summary

In summary, the article has shared you about the solutions for “Objects are not valid as a React child”, along with practical examples. However, using the Array.map() and accessing each key of the Object is the most appropriate way.

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs