How to set array to state of component in ReactJS?

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 May 10 '18 at 16:39 — madox2, May 10 '18 at 16:39
@madox2 I updated my post – Johnnybossboy May 10 '18 at 16:40 — Johnnybossboy, May 10 '18 at 16:40

score 0 · Answer 1 · answered May 10 '18 at 16:41

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>

score 0 · Answer 2 · answered May 10 '18 at 16:45

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 '18 at 16:45

Gautam Naik

8,990
3
27
42

You need to wrap the render function – Joseba May 10 '18 at 16:49

How to set array to state of component in ReactJS?

2 Answers2