React , Error: Objects are not valid as a React child (found: object with keys {data})

Question

When I tried to pass a number as argument to function inside JSX the above error occured.

Working file Link : https://codesandbox.io/s/divine-hill-v3gl3?fontsize=14&hidenavigation=1&theme=dark&file=/new.js

React Component.


function Rating(data) {
  // This function indent to display number 0 to 3 based on 'data'; 
  switch (data) {
    case data <= 0: {
      return <div>0</div>;
    }
    case 0 < data <= 1: {
      return <div>1</div>;
    }
    case 1 < data <= 2: {
      return <div>2</div>;
    }
    case 2 < data <= 3: {
      return <div>3</div>;
    }
    default:
      return data;
  }
}

function some() {
  return (
    <div>
      <Rating data={product.totalrating} />
    </div>
  );
}

export default some;

The example you provided works. Can this question be marked as resolved? — garritfra
– garritfra, Commented Jul 14, 2020 at 9:36

Dennis Vash · Accepted Answer · 2020-07-14 09:38:23Z

2

You are using the prop object instead the actual data:

// not Rating(data), 
// as the argument of function component is a prop object
function Rating({data}) {
  //...
  return data;
}

answered Jul 14, 2020 at 9:38

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Anoop K George Over a year ago

Thank you , please note that there is error in switch function, it returns default value instead of comparison. codesandbox.io/s/…

Dennis Vash Over a year ago

Your switch statement is wrong, I pretty sure you can't use boolean expression there.

Anoop K George Over a year ago

Oh I see,I did't know that

Dennis Vash Over a year ago

@AnoopKGeorge developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Dennis Vash Over a year ago

Yes you should.

|

F.bernal · Accepted Answer · 2020-07-14 09:40:00Z

1

The problem you get is here:

function Rating(data) {

In a component you are receiving PROPS so you are getting an object like this:

data: {
 data: 1
}

In your code you are comparing with the object so you get the default case in the switch, returning the object above.

to fix it you can do:

function Rating({data}) {

or

function Rating(props) {

and use props.data for your comparations.

answered Jul 14, 2020 at 9:40

F.bernal

2,7022 gold badges24 silver badges28 bronze badges

Comments

Eugene · Accepted Answer · 2020-07-14 09:40:23Z

1

When you pass props to the component, you receive them as object. If you pass

<Rating data={data} />

then you receive props in a Rating component like { data: YOUR DATA }

Link to working sandbox https://codesandbox.io/s/fancy-smoke-wl8he

answered Jul 14, 2020 at 9:40

Eugene

9831 gold badge9 silver badges26 bronze badges

Collectives™ on Stack Overflow

React , Error: Objects are not valid as a React child (found: object with keys {data})

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related