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&apos;all!</p>      {homes.map(home => <div>{home.name}</div>)}    </div>  );

I had a similar error while I was creating a custom modal.

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

Problem was that I didn't wrap my values to curly brackets like this.

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

If you have multiple values to pass to the component, you should use curly brackets around it.

I got the same error today but with a different scenario as compared to the scenario posted in this question. Hope the solution to below scenario helps someone.

The render function below is sufficient to understand my scenario and solution:

render() {    let orderDetails = null;    if(this.props.loading){        orderDetails = <Spinner />;    }    if(this.props.orders.length == 0){        orderDetails = null;    }    orderDetails = (        <div>            {                this.props.orders &&                 this.props.orders.length > 0 &&                 this.props.orders.map(order => (                <Order                     key={order.id}                    ingredient={order.ingredients}                    price={order.price} />                ))            }        </div>    );    return orderDetails;}

In above code snippet : If return orderDetails is sent as return {orderDetails} then the error posted in this question pops up despite the value of 'orderDetails' (value as <Spinner/> or null or JSX related to <Order /> component).

Error description : react-dom.development.js:57 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {orderDetails}). If you meant to render a collection of children, use an array instead.

We cannot return a JavaScript object from a return call inside the render() method. The reason being React expects some JSX, false, null, undefined, true to render in the UI and NOT some JavaScript object that I am trying to render when I use return {orderDetails} and hence get the error as above.

VALID :

<div /><div></div><div>{false}</div><div>{null}</div><div>{undefined}</div><div>{true}</div>

INVALID :

<div>{orderDetails}</div> // This is WRONG, orderDetails is an object and NOT a valid return value that React expects.

Edit: I also got this error on my company's test server used by QA's for their testing. I pointed my local code to that test server and tested the scenario in which this error was reported by QA team and found NO ERROR in my local machine. I got surprised. I re-checked multiple number of times, re-checked the scenario with QA team and I was doing right but still I was not able to replicate the issue. I consulted my fellow devs but still were not able to figure out the root cause. So keeping with the information in the error message I started scanning all the code I had deployed in my last deployment commit ( to be more specific last 4-5 commits because I suspected it could be there from last few deployments but was caught in the current deployment), especially all the components I had developed and found that there was a component - inside which there was no specified condition being met so it was returning NOTHING from it. So see below sample pseudo code. I hope it helps.

render () {return (    {this.props.condition1 && (       return some jsx 1    )}    {this.props.condition1 && (       return some jsx 2    )})}

If you see in above pseudo code if condition1 and condition2 are not met then this component will render NOTHING from it and ideally a react component must return some JSX, false, null, undefined, true from it.