If you meant to render a collection of children, use an array instead.

Question

Problem :

I am trying to learn React JS. I have written a code for component . I also have the data that I get from a Data Base, and whose current state (myDB) I dispatch.I am trying to use data from myDB object and then want to display some of the properties of the component. Because of some unknown reason I am unable to use {myDB} in a return method of my component. When I try to do so, I face a below error message :

Objects are not valid as a React child. If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons

How to fix this issue ?

Answer 1

I have understood your question and I can help you in fixing your error.

I think your myDB object is returned as empty in your component lifecycle. You are fetching your data from a server, and your operates in a API lifecycle but your component is getting rendered before you have your data in myDB object. So it is currently empty and the {myDB.title} in a return is returning as undefined.

So the solution is as below :

let myDB = this.props.myDB || {}

It will return a empty myDB object after that after fetching your data to a myDB object your component will surely re-render it and {myDB.title} in your return will be displayed a title as expected.

Answer 2

STEP 1: The first change necessary was to define an object that contains the props the component needs.

function StatusDescription(props: {
  status: Status;
}): JSX.Element {
    return {props.status};

STEP 2: Now it is valid to use StatusDescription as a React component.

type ComponentProps = {
  status: Status;
  // Whatever else is needed
}
function StatusDescription(props: ComponentProps): JSX.Element {
  return {props.status};
}

 

STEP 3: 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>
  );

 

May be 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.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).