How to set array to state of component in ReactJS? [duplicate]

Question

When I render this in ReactJS, I get the error: "Objects are not valid as a React child (found: object with keys {Source, Value}). If you meant to render a collection of children, use an array instead.". But in my initial state, I init the key "list_ratings" as an array.

// this is in my constructor method
this.state = {list_ratings: []}

// this is somewhere else in my code    
let movieRatings = [
                            {"Source": "IMDB", "Value": "8"},
                            {"Source": "GDN", "Value": "6"},
                            {"Source": "The times", "Value": "7"}
                        ];

                        this.setState({
                            list_ratings: movieRatings
                        });

How can I solve this?

I render the list of ratings as follows:

<p>{this.state.list_ratings}</p>

how do you render list_ratings?

madox2
– madox2

2018-05-10 16:39:29 +00:00
Commented May 10, 2018 at 16:39 — madox2
– madox2, Commented May 10, 2018 at 16:39
@madox2 I updated my post

Johnnybossboy
– Johnnybossboy

2018-05-10 16:40:33 +00:00
Commented May 10, 2018 at 16:40 — Johnnybossboy
– Johnnybossboy, Commented May 10, 2018 at 16:40

Tomasz Mularczyk · Accepted Answer · 2018-05-10 16:41:29Z

0

You try to render plain Object which is not valid:

<div>
  <p>{this.state.list_ratings}</p>
</div>

Fix it by rendering something valid like key strings:

<p>{this.state.list_ratings[0].Source + " " + this.state.list_ratings[0].Value}</p>

or map the whole list:

<div>
  {
    this.state.list_ratings.map(lR => 
     <p key={lR.Value}>{lR.Source + " " + lR.Value}</p>
    )
  }
</div>

answered May 10, 2018 at 16:41

Tomasz Mularczyk

36.4k19 gold badges118 silver badges176 bronze badges

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

Comments

Gautam Naik · Accepted Answer · 2018-05-10 16:45:37Z

0

You need to use map on movieRatings, to go through each each object

 const movieRatingsList = movieRatings.map((movieRating, i) =>
    <li key={i}> {movieRating.Source} : {movieRating.Value}  </li>
  );


render(){
 return(
   {this.movieRatingsList()}
 )
}

answered May 10, 2018 at 16:45

Gautam Naik

9,4543 gold badges31 silver badges45 bronze badges

1 Comment

Joseba Over a year ago

You need to wrap the render function

Collectives™ on Stack Overflow

How to set array to state of component in ReactJS? [duplicate]

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related