React is the development library of JavaScript-based UI. It is managed by an open-source development community and Facebook. React is a popular library in web development although it is not a language. “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” is a common error that happens in many ways. In the article, we will suggest you some solutions to fix it. Read on it.

When Do You Get “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” Error?

When you are trying to use function, you may encounter the following error.

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.

For example, here is the detail of your program:

getUserData = async () => { try { let res = await axios.get('/users'); let usr = res.data; return usr.map((users, i) => { return ( {users.name} ); }); } catch (err) { console.log("Unknown Error Occurs"); } }
render () { return (
  <div>
    <ul className="list-group list-group-flush">
      {this.getUserData()}
    </ul>
  </div>
); }

When you attempt to render an array or an object directly in your JSX code, the error “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” appears.

What Is Asynchronous Rendering In React?

A toolkit for declarative promise resolution and data retrieval is React Async. It eliminates presumptions about the nature of your data or the nature of the request, making it simple to handle asynchronous UI states. A React component and numerous hooks make up React Async. It is compatible with GraphQL, fetch, Axios, and other data fetching libraries. A fresh React feature called suspense was unveiled in React 16.6. By allowing you to wait for some code to load and declaratively describe a loading state (like a spinner) while waiting, it intends to assist with handling async actions.

It enables you to postpone rendering a portion of your application tree until a certain circumstance occurs (for instance, a resource is loaded or data from an endpoint ).

How To Solve The Error “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”

Solution 1: Delete async

The simplest method for you to resolve the error “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” is to delete async. Here, all you have to do is disable async similar to the one below:

getUserData = async () => { // Just remove this async . . . }

After doing that, your error will completely disappear.

Solution 2: Utilize the map() 

Utilizing the map() function to draw an array or access the object’s properties while rendering it to fix the problem is a great idea. Look at this example:

export default function App() { const employees = [ {id: 1, name: 'Alice', country: 'Austria'}, {id: 2, name: 'Bob', country: 'Belgium'}, {id: 3, name: 'Carl', country: 'Canada'}, ];
const obj = { id: 4, name: 'Dean', country: 'Denmark', };
return (
{employees.map((employee, index) => { return (
name: {employee.name}
country: {employee.country}
        <hr />
      </div>
    );
  })}
  <hr />
  <hr />
  <hr />
  <div>
    <h2>name: {obj.name}</h2>
    <h2>county: {obj.country}</h2>
  </div>
  <hr />
</div>
); }

Solution 3: Utilize JSON.stringify()

Exceting the solutions mentioned above, there is another way for you to fix the error “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”. It is utilizing JSON.stringify(). You can verify the value is of the expected type by using the JSX function JSON.stringify(). Take a look at the following example to understand more about this method.

export default function App() { const employees = [ {id: 1, name: 'Alice', country: 'Austria'}, {id: 2, name: 'Bob', country: 'Belgium'}, {id: 3, name: 'Carl', country: 'Canada'}, ];
const obj = { id: 4, name: 'Dean', country: 'Denmark', };
return (
{JSON.stringify(employees)}
  <h4>{JSON.stringify(obj)}</h4>
</div>
); }

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

Solution 4: Simply do as the following

Because the async function in this case returns promises rather than original data, the above error is displayed. All of the data only needs to be set to “vaiable” before you can use it in this manner. You simply need to do as the following:

getUserData = async() => { . . . const res = await axios.get('/users'); const users = res.data;
// set Promis data into Users variable
this.setState({
  Users: users
});
. . . }
render() { const usersData = this.state.Users?.map((post, i) => ( {users.name} ));
return (
  <div>
  <ul className="list-group list-group-flush">
    {usersData}
  </ul>
</div>
); }

After using this method, your problem will be completely resolve and your program will run well without any errors.

Conclusion

Our guideline has introduced some methods to fix the error “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“. Aside from these potent methods, ITtutoria also welcomes other suggestions and approaches from you! Feel free to leave your comments or inquiries in the comment section below.

Read more

→ The Top Effective Solutions For The Error: remote: Uncaught Error: A cross-origin error was thrown. React doesn’t have access to the actual error object in development in reactjs