close

[Solved] Objects are not valid as a React child (found: [object Promise])

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error Objects are not valid as a React child (found: [object Promise]) in javascript. 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 Objects are not valid as a React child (found: [object Promise]) Error Occurs?

Today I get the following error Objects are not valid as a React child (found: [object Promise]) in javascript.

How To Solve Objects are not valid as a React child (found: [object Promise]) Error ?

  1. How To Solve Objects are not valid as a React child (found: [object Promise]) Error ?

    To Solve Objects are not valid as a React child (found: [object Promise]) Error
    please check:
    const children = jest.fn().mockReturnValueOnce(null)
    NOT
    const children = jest.fn().mockRejectedValue(null);

  2. Objects are not valid as a React child (found: [object Promise])

    To Solve Objects are not valid as a React child (found: [object Promise]) Error
    please check:
    const children = jest.fn().mockReturnValueOnce(null)
    NOT
    const children = jest.fn().mockRejectedValue(null);

Solution 1

You need to do it like this

componentDidMount() {
  this.renderPosts();
}

renderPosts = async() => {
  try {
    const res = await axios.get('/posts');
    const posts = res.data;

    // this will re render the view with new data
    this.setState({
      Posts: posts
    });
  } catch (err) {
    console.log(err);
  }
}

render() {
  const posts = this.state.Posts?.map((post, i) => (
    <li key={i} className="list-group-item">{post.text}</li>
  ));

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

Solution 2

Poor me

For anyone using jest test

And trying to call a function children then received this Error

please check:

const children = jest.fn().mockReturnValueOnce(null)

NOT

const children = jest.fn().mockRejectedValue(null);

Summery

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? Thank You.

Also Read

Leave a Comment