“Objects are not valid as a React child” is a common error that many programmers encounter. It shows up in many ways. What is the cause of it and how to fix it? Read on this article to get more information. In this article, we will give you some solutions to fix this error.

When Do You Get The Error “Objects are not valid as a React child”?

When you run the following program, you will get the error “Objects are not valid as a React child“:

export default function App() {
 
  const football_clubs = [
    {id_FC: 1, name: 'Fulham', league: 'EPL', country: 'England'},
    {id_FC: 2, name: 'Chelsea', league: 'EPL', country: 'England'},
    {id_FC: 3, name: 'Juventus', league: 'Serie A', country: 'Italy'},
  ];
 
  const object_FC = {
    id_FC: 4,
    name: 'Napoli',
    league: 'Serie A',
    country: 'Italy',
  };
 
  return (
    <div>
      {football_clubs}
      {object_FC}
    </div>
  );
}

Directly displaying an object or an array in your JSX code.

• Directly rendering a Date object in your JSX code.
• Putting a variable between two sets of curly brackets, such as “message” rather than “message”.
• An async function is being called in your JSX code.

How To Solve The Error “Objects are not valid as a React child”?

Method 1: Utilize the map() function

To fix the error “Objects are not valid as a React child“, you can utilize the map() function. It helps you to access properties on the object or render an array when rendering it. Look at the following example to understand more about this method:

export default function App() {
 
  const football_clubs = [
    {id_FC: 1, name: 'Fulham', league: 'EPL', country: 'England'},
    {id_FC: 2, name: 'Chelsea', league: 'EPL', country: 'England'},
    {id_FC: 3, name: 'Juventus', league: 'Serie A', country: 'Italy'},
  ];  
 
  const object_FC = {
    id_FC: 4,
    name: 'Napoli',
    league: 'Serie A',
    country: 'Italy',
  };
 
  return (
    <div>
      {football_clubs.map((football_club, index) => {
        return (
          <div key={index}>
            <h2>name: {football_club.name}</h2>
            <h2>name: {football_club.league}</h2>
            <h2>country: {football_club.country}</h2>
            <hr />
          </div>
        );
      })}
      <hr />
      <hr />
      <hr />
      <div>
        <h2>name: {object_FC.name}</h2>
        <h2>name: {object_FC.league}</h2>
        <h2>county: {object_FC.country}</h2>
      </div>
      <hr />
    </div>
  );
}

Console.log() the value that is causing the error during debugging.

As an alternative, you can make sure the value is of the expected type by using the JSX function JSON.stringify() in your JSX code.

export default function App() {
 
  const football_clubs = [
    {id_FC: 1, name: 'Fulham', league: 'EPL', country: 'England'},
    {id_FC: 2, name: 'Chelsea', league: 'EPL', country: 'England'},
    {id_FC: 3, name: 'Juventus', league: 'Serie A', country: 'Italy'},
  ];  
 
  const object_FC = {
    id_FC: 4,
    name: 'Napoli',
    league: 'Serie A',
    country: 'Italy',
  };  
 
  return (
    <div>
      <h3>{JSON.stringify(football_clubs)}</h3>
      <h3>{JSON.stringify(object_FC)}</h3>
   </div>
  );
}

Before the object is rendered, it will be changed into a string by the JSON.stringify() method.

Method 2: Utilize the built-in JS.toString() method 

Utilizing the built-in JS.toString() method for Dates is the simplest way to fix an invalid rendering of a Date  of a date. This will render the Date as a primitive string, which React will render without any issues.

import * as React from "react";

export const ValidComponent: React.FC = () => {
  return (
    <div>
         ValidComponent
      <div>{(new Date).toString()}<div>
    <div>
  )
}

Dates will probably require better formatting than just being converted to a string. Various JS date libraries are available to help you with this. Moment.js and date-fns are fantastic points to start; let’s check them.

Method 3: Access a method on the Date object

Another way for you to solve the error is accessing a method on the Date object, for example toLocaleDateString().

export default function App() {
  return (
    <div>
      <h3>{date.toLocaleDateString()}</h3>
    </div>
  );
}

Because you are now rendering a string rather than an object, the problem has been fixed.

Ensure that you are not rendering a variable with double curly braces if the error still occurs.

export default function App() {
 
  const example_text = 'Objects are not valid as a React child';
 
  return (
    <div>
      <h3>{{example_text}}</h3>
    </div>
  );
}

React thinks that you are attempting to render an object because, as you can see, the message variable is enclosed in two sets of curly brackets.

Wrap variables only once in a single set of curly brackets to fix the problem.

export default function App() {
  
   return (
      <div>
        <h3>{example_text}</h3>
      </div>
    );
}

Now that the message variable no longer contains an object, React sees it as an expression containing a string.

Check to see if any async functions are being called in your JSX code if the error still occurs. If you use an async function in your JSX code, an error will occur since it returns a Promise object.

export default function App() {
 
  async function inputData() {
    return Promise.resolve(42);
  }

  return (
    <div>
      <h3>{inputData()}</h3>
    </div>
  );
}

You must call the async method inside of the useEffect hook or in an event handler, such as onClick, to resolve the issue.

import {useEffect, useState} from 'react';

export default function App() {
  const [ex_number, set_number] = useState(0);

  useEffect(() => {
    async function inputData() {
      const result = await Promise.resolve(42);
      set_number(result);
    }
    inputData();
  }, []);

  return (
    <div>
      <h3>{ex_number}</h3>
    </div>
  );
}

The problem is resolved by calling the async function in our useEffect hook because you are now rendering a number instead of a Promise object.

Conclusion

If you’re confused by the “Objects are not valid as a React child” error, the above solutions are the most effective. Even if you still need help or have other questions, there is a large community to which you can turn, and everyone is usually eager to help. Finally, we wish all of our readers a wonderful day full of new ideas.

Read more

→ Fixing “Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead”