• Register
0 votes
235 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 2.3K views
2.3K 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
2 answers 1.6K views
1.6K 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
1 vote
1 answer 51 views
51 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 35 views
35 views
Problem: Hello guys, I am having a problem in python is that today while revising the python concept I was working with a program of compound interest and while the output came I have to round it to be two places in the decimal so wondering what are the various method in which we can do this.
asked Jun 8, 2020 Gavin 15.3k points
0 votes
1 answer 453 views
453 views
Problem : I am new to PHP. When I am trying to execute my PHP code then I am facing below error ( ! ) Fatal error: Cannot use isset() on the result of a function call (you can use "null !== func()" instead) in C:\Users\ mphil\Documents\NetBeansProjects\ ... 45 Call Stack #   Time    Memory  Function    Location 1   0.0000  234208  {main}( )   ..\index.php:0 Please help me in fixing this issue.
asked Feb 15, 2020 mphil 2.3k points
0 votes
1 answer 3K views
3K views
Problem : I am trying to start the Redux application I just cloned from the GitHub repository. I tried to run it with the below command npm start But I am getting below error > react-redux@1.0.0 start /home/workspace/assignment > webpack-dev-server --config ./ ... output above. npm WARN Local package.json exists, but node_modules missing, did you mean to install? How can I fix the above error?
asked Jan 20, 2020 jwilliam 3.9k points
0 votes
1 answer 336 views
336 views
Problem: I have recently started learning about React, Babel, JSX and JS. Now I am receiving an error from a babel if I tried to compile my JSX code into a JS code. Please find the error: &ldquo;Jsx value should be either an expression or a quoted jsx text.&rdquo ... out in my searching on interenet that prop values should be passed only between {}, but adding these to my code did not help me.
asked Aug 13, 2020 Raphael Pacheco 4.9k points
0 votes
1 answer 1.7K views
1.7K views
Problem : I am getting following error: Deprecationwarning: collection.ensureindex is deprecated. use createindexes instead. Where is above error coming from? I am not at all using ensureIndex or createIndex in my Nodejs application anywhere. I am using the yarn package manager. ... ', { useNewUrlParser: true }); const myapp = express(); Does anyone ever faced this issue? Any solution on it?
asked Dec 10, 2019 alecxe 7.5k points
0 votes
1 answer 18 views
18 views
My problem to solve is this: Make a structure called student, in which you will have the fields: name, age, average and data will be requested from the user of how many students will enter and check which of them has the best average and print it, use pointers. I would ... struct Student {      char name [30];      int age;      average float; } student [nStudents], * studentPointer = student;
asked Aug 14, 2020 game 4.6k points