• Register
0 votes
528 views

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 ?

8 4 2
2,300 points

Please log in or register to answer this question.

2 Answers

0 votes

Solution :

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.

5 2 1
4,980 points
0 votes

Solution:

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

10 6 4
31,120 points

Related questions

0 votes
1 answer 38 views
38 views
Problem: why I get this error: input is a void element tag and must neither have `children` nor use `dangerouslysetinnerhtml`..
asked Mar 6 Wafa Abu Yousef 6.1k points
0 votes
1 answer 3.7K views
3.7K views
Problem : Facing following strange issue input is a void element tag and must neither have `children` nor use `dangerouslysetinnerhtml`.
asked Nov 13, 2019 peterlaw 6.9k points
0 votes
1 answer 9 views
9 views
Problem: I am very new to React and so facing this error: expected an assignment or function call and instead saw an expression no-unused-expressions
asked Mar 14 Wafa Abu Yousef 6.1k points
0 votes
2 answers 1.9K views
1.9K views
Problem : I am very new to React and so facing this error expected an assignment or function call and instead saw an expression no-unused-expressions
asked Nov 18, 2019 peterlaw 6.9k points
0 votes
1 answer 2 views
2 views
Problem: Can someone answer me how to get registerforeventvalidation can only be called during render ?
asked Mar 31 jamuna1 8.5k points
0 votes
1 answer 2 views
2 views
Problem: i don&rsquo;t understand this problem. please help me? rendered more hooks than during the previous render
asked 1 day ago Rohit kr 15k points
0 votes
1 answer 8 views
8 views
Problem: When populating the listview with a valid data source, the following warning is printed at the bottom of the screen: Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of ListView.
asked Mar 15 ummesalma 22.9k points
1 vote
1 answer 71 views
71 views
Problem : I am very new to ruby-on-rails and reactjs. I have recently joined a new project. If I try to iterate through my variable mybadges and try to display each badge then I face below error : Each child in an array or iterator should have a unique "key" prop. ... error but was unable to fix it. So now I am looking for ruby-on-rails and reactjs expert who can help me in fixing above error.
asked May 4, 2020 stewart 4k points
0 votes
1 answer 6 views
6 views
Problem: Any help, I will be so thankful: Deprecationwarning: collection.ensureindex is deprecated. use createindexes instead.
asked Mar 14 Wafa Abu Yousef 6.1k points