Invariant Violation: Objects Are Not Valid as a React Child

Invariant Violation: Objects are not valid as a React child when firing a function

You are getting this error beucase this.delay() will return a Promise object and you can't render objects.

Any function that have async returns a Promise.

To solve this, you need a if to decide what to return and a state to keep the status of the setTimeout.

1. Keep a state of shouldRedirect

   state = {
      ...
      shouldRedirect: false
   }
   

2. Update the state when the setTimeout finishes

   delay = async () => {
       const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
       await sleep(1000);
       this.setState({shouldRedirect: true})
   }
   

3. Check in the render method if shouldRedirect

   render(){
       if(this.state.shouldRedirect){
           return <Redirect to="/dashboard" />
       }
       // continue with normal render
       ...
   }
   

4. Call delay in the correct place

   onChange = e => {
       e.preventDefault();
       let number = e.target.value
       this.setState({number});
       if(this.state.numbers.find(num => num === number)){
           this.delay()
       }
   };
   

Objects are not valid as a React child error when giving value to react-select

If you check the error it is telling Object is not valid child. And to use array instead. Currently you are just printing the whole object.

That's how you onChange method would look like:

onChange={(items) => {
  items.forEach((value) =>                                           
  setFieldValue("tags", ...value.value); 
  });
}}

You can change the code if some modifications are need as required. But that is the main idea that you have array so you will be showing multiple elements.

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

Your data homes is an array, so you would have to iterate over the array using Array.prototype.map() for it to work.

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

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

What happens here is that you have an object with properties.

There is a few things you can do.

You can show the properties you want

Instead of trying to render the full component, you can render some prop of it

{this.state.search === "" ? allStudents : this.state.filteredStudents.email} // render the email string

What you can also do is loop over the values of the object (Object.values) and render each property

{this.state.search === "" ? 
    allStudents : 
    this.state.filteredStudents.map(obj => Object.values(obj)
          .map(propValue => <p>{propValue}</p>))  // render the value of each property
}

But please, be more clear on your question, how you want to display, what you want to display and what you have in your component.

Just keep in mind that this.state.filteredStudents is an object and you can't render objects.

Error: React is Returning Objects are not valid as a React child

You are passing an object, React can't render that because it's a complex object, basically it doesn't know what to do with that object. You can pass array or string or integer or other primitive types.

I have made an example here.

Uncomment the line that passes object to the Test component and you see a similar error.

JavaScript: Uncaught Invariant Violation: Objects are not valid as a React child - on second of two identical date inputs

Thanks to Shyam and Vishal for suggesting that I created a sandbox.
I spent quite a bit of time preparing some code to do just that before seeing where my problem was!

As I stated in my question: "I understand the error message, and having read lots of solutions on this site most of them usually final they are rendering an object and not what they thought was a string."

And I was doing just that.

The problem was not where I had decided it was before asking this question, it was elsewhere:

<table>
...
    <td>
        { item.date_terminated_prereq }
    </td>
...
</table>

As can be seen from the above code segment I was actually displaying the changed date as part of a table. The moment it rendered I got the error message.

So the learning that has come from this for me, is that everywhere on StackOverflow I have seen mention of this issue it has been because an 'object' was being displayed accidentally, or unknowingly.
I should have taken that in good faith and looked for it as a problem in my code, rather than stubbornly think the error was with the <DateControl />.

Note to reviewer:
Should I just delete this whole question as my answer is more philosophical than practical?

---

Related Topics