Objects are not valid as a React child

In this tutorial we are going to see the solution to this hectic “object are not valid as a react child” error. But first of all, have a look at the introduction to react js.

What is React Js?

React is the framework of javascript it is used in front-end development. The react.js is an easy-to-use language which provides the most reliable packages, methods, and functions for experiencing the best layout development without facing any complications.

For installing react.js make sure the node.js and npm are already installed in your system then just execute the following commands in the command prompt and now you are ready to work in the react.js environment.

npx create-react-application  my-react-application

The above command will create a folder “my react application” just let it finish the process it will create a react environment for your react.js programs.

cd my-react-application

The above command will move your folder to the c drive.

npm start

After running the above command just wait for completing the process, it will open up the browser of react.js. you can also open the react file by typing localhost:3000 in the browser.

You can write the react code in the App.js file. You can find it in the my-react-application folder there will be a file named “src” when you open that file so you will see the App.js file there.

Remove the already written code from the file and add your code then just save the file and you don’t need to reload the page the changes will be shown automatically.

Now let’s move forward to our topic of how to solve this “objects are not valid as a react child” error, but let’s first discuss what is the reason behind the occurrence of this error.

Why does “objects are not valid as a react child” error occurs?

There are two main reasons behind this error.

  • when you try to deliver an array or object in the JSX program file directly.
  • when you enclosed a variable in double curly braces.

For better understanding check out the examples below.

Error Example 1

import logo from './logo.svg';
import './App.css';

export default function Application() {

  const students = [
    {id: 101, name: 'Ali', destination: 'Dubai'},
    {id: 102, name: 'Bilal', destination: 'Pakistan'},
    {id: 103, name: 'kashif', destination: 'China'},
  ];

  const obj = {
    id: 104,
    name: 'danial',
    destination: 'canada',
  };

  return (
    <div>
      {students}

      {obj}
    </div>
  );
}

Code Explanation

In the above code, we exported the default function application then we created an array, and then tried to deliver an object as well.

The issue with the above code is we tried to render an object or array directly which is not the correct way so the code will produce the following error.

Output

As you can see the output above it is giving the “objects are not valid as a React child” error 

So now what should we do for getting rid of this error? There is a way we can use the map function see the solution below.

Solution 1

import logo from './logo.svg';
import './App.css';

export default function Application() {

  const students = [
    {id: 101, name: 'Ali', destination: 'Dubai'},
    {id: 102, name: 'Bilal', destination: 'Pakistan'},
    {id: 103, name: 'kashif', destination: 'China'},
  ];

  const obj = {
    id: 104,
    name: 'danial',
    destination: 'canada',
  };

return (
    <div>
      {students.map((students, index) => {
        return (
          <div key={index}>
            <h2>name: {students.name}</h2>
            <h2>destination: {students.destination}</h2>

            <hr />
          </div>
        );
      })}

      <hr />
      <hr />
      <hr />

      <div>
        <h2>name: {obj.name}</h2>
        <h2>destination: {obj.destination}</h2>
      </div>

      <hr />
    </div>
  );
}

Code Explanation

In the above code, we used a map function for delivering an array and to access the properties of the object. Check out the results below.

Output

name: Ali
destination: Dubai

name: Bilal
destination: Pakistan

name: kashif
destination: China

name: danial
destination: Canada

Now let’s move forward to the next reason check out the example below.

Error Example 2

import logo from './logo.svg';
import './App.css';

export default function Application() {

 const text = 'hi universe';

  return (
    <div>
      <h4>{{text}}</h4>
    </div>
  );
}

Code Explanation

In the above code, we declared a variable in which we stored text then in the return statement we returned the div in which we passed the variable as a child in double curly braces. Check out the results below.

Output

As you can see it is also giving the same “objects are not valid as a React child” error because as we mentioned above the reason we passed the variable in double curly braces and react treats it like a delivered object or an object which we are trying to render.

So we have a solution for this issue as well see the solution below.

Solution 2

import logo from './logo.svg';
import './App.css';

export default function Application() {

 const text = 'hi universe';

  return (
    <div>
      <h4>{text}</h4>
    </div>
  );
}

Output

hi universe

As you can see above output the text has been printed and we solved the error.

Conclusion

In this tutorial, we talked about the “objects are not valid as a React child” error.

We discussed what is React.js then we discussed the reasons behind the occurrence of the error.

We discussed demo examples with errors and their solutions with code explanations as well.

That’s all for today hope you like the tutorial if you have any queries regarding this tutorial so feel free to contact us below. Thanks for reading.

Suggested Article:

Leave a Comment