[Solved] 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

Hello Guys, How are you all? Hope You all Are Fine. Today I am trying to using function But I am facing 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 in Reactjs. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How 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 Occurs ?

I am trying to using function But I am facing 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.

Here is my code.

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

  render () {
    return (
      <div>
        <ul className="list-group list-group-flush">
          {this.getUserData()}
        </ul>
      </div>
    );
  }

How To Solve 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 ?

Solution 1: Remove async

Here You Just need to Remove async from funcion Just like below Example.

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

Now, Your error may be solved.

Solution 2: Use Just like this

Here Async Function will return Promis Not Origional Data Thats Why You are facing above error. You Just need to set All Data in vaiable and then You can Use It Just Like this.

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) => (
    <li key={i} className="list-group-item">{users.name}</li>
  ));

  return (
    <div>
      <ul className="list-group list-group-flush">
        {usersData}
      </ul>
    </div>
  );
}

Now, Your error must be solved.

Summary

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

• Timed out after 300seconds waiting for emulator to come online in android Studio