close

[Solved] Objects are not valid as a React child. 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 fetching data from API and I am setting my data in Div but facing the following error Objects are not valid as a React child. 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 Objects are not valid as a React child. If you meant to render a collection of children, use an array instead Error Occurs ?

Today I am fetching data from API and I am setting my data in Div but facing the following error.

Objects are not valid as a React child. If you meant to render a collection of children, use an array instead

Here is my code Where I am facing this error. where users are my API response.

      return (
        <div className="col">
          <h1>Mi Casa</h1>
          <p>This is my house y'all!</p>
          <p>Member: {users}</p>
        </div>
      );

How To Solve Objects are not valid as a React child. If you meant to render a collection of children, use an array instead Error ?

  1. How To Solve Objects are not valid as a React child. If you meant to render a collection of children, use an array instead Error?

    To Solve Objects are not valid as a React child. If you meant to render a collection of children, use an array instead of Error Here as you said Your data users are an array, so you would have to iterate over the array using Array.prototype.map() for it to work. For Example, you can use Like this. {users.map(user =>
    {user.name}
    )}

  2. Objects are not valid as a React child. If you meant to render a collection of children, use an array instead

    To Solve Objects are not valid as a React child. If you meant to render a collection of children, use an array instead of Error Here as you said Your data users are an array, so you would have to iterate over the array using Array.prototype.map() for it to work. For Example, you can use Like this. {users.map(user =>
    {user.name}
    )}

Solution 1: use Array.prototype.map() for it

Here as you said Your data users are an array, so you would have to iterate over the array using Array.prototype.map() for it to work. For Example, you can use Like this.

  return (
    <div className="col">
      <h1>Mi Casa</h1>
      <p>This is my house y&apos;all!</p>
      {users.map(user => <div>{user.name}</div>)}
    </div>
  );

Solution 2: use curly brackets

In my case, this error was occurred due to the below code. Problem was that I didn’t wrap my values to curly brackets.

const MyCustomModal = (visible, modalText, modalHeader) => {} #this is error

Then I used curly brackets around it and my problem was solved.

const CustomModal = ({visible, modalText, modalHeader}) => {}

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?

Also Read

Please Rate Our Solution to Motivate Us For Give Our Best

Leave a Comment