How to render a nested array in react

Question

I have this array of restaurants I am mapping over, so far I can return the restaurant's name in that array but we have another array inside it called ratings, I am trying to map over the rating array and return the stars and comments. In this fiddle it's only returning the first ratings stars and comments in every restaurant, how can I render the second or even third star and comments? here is the fiddle https://jsfiddle.net/miami78/94efxpg8/1/

  {
       "restaurantName":"Bronco",
       "address":"39 Rue des Petites Écuries, 75010 Paris",
       "lat":48.8737815,
       "long":2.3501649,
       "ratings":[
          {
             "stars":4,
             "comment":"Great! But not many veggie options."
          },
          {
             "stars":5,
             "comment":"My favorite restaurant!"
          }
       ]
    },
    {
       "restaurantName":"Babalou",
       "address":"4 Rue Lamarck, 75018 Paris",
       "lat":48.8865035,
       "long":2.3442197,
       "ratings":[
          {
             "stars":5,
             "comment":"Tiny pizzeria next to Sacre Coeur!"
          },
          {
             "stars":3,
             "comment":"Meh, it was fine."
          }
       ]
    }
]

class RestaurantCard extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      restaurants: []
    }
  }
  componentDidMount() {
    this.setState({
      restaurants: Restaurants
    })
  }

  render() {
    console.log(this.state.restaurants)
    return (
      <div className="restaurant-list">
        {this.state.restaurants.map((restaurant, index) => {
          return (
            <div key={index} className="section">
              <div className="section-header">
                <h3>{restaurant.restaurantName}</h3>
              </div>
              {this.state.restaurants[0].ratings.map((rating, i) => {
                return (
                  <div key={i} className="section-details">
                    <span>
                      <Rate disabled defaultValue={rating.stars} />
                    </span>
                    <p>{rating.comment}</p>
                  </div>
                )
              })}
            </div>
          )
        })}
      </div>
    )
  }
}

Yousaf · Accepted Answer · 2020-07-05 12:12:54Z

3

Problem is that you are mapping over the first restaurant's ratings array.

You should .map() over the current restaurant's ratings array.

{
   this.state.restaurants.map((restaurant, index)=> {
        return(
           <div key={index} className= "section">
              <div className="section-header">
                 <h3>{restaurant.restaurantName}</h3>
              </div>
              {/* map over the current restaurant's ratings array */}
              { restaurant.ratings.map((rating,i)=> {
                 return(
                    <div key={i} className="section-details">
                       <span><Rate disabled defaultValue={rating.stars}/></span>
                       <p>{rating.comment}</p>
                    </div>
                 )
               })}
           </div>  
        )
    })
}

answered Jul 5, 2020 at 12:12

Yousaf

29.5k6 gold badges54 silver badges78 bronze badges

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

1 Comment

Miami Larry Over a year ago

Yeap this is exactly what i needed,it works, thank you

jinwar · Accepted Answer · 2020-07-05 12:12:29Z

1

you can do a map again like this :

<div>
    {
        restaurants.map(item => <>
            The name is {item.restaurantName},
            <br/>
            And the grades are :
            <br/>
            {
                item.ratings.map(item2 => <>
                    {item2.stars} {item2.comment}
                </>)
            }
        </>);
    }
</div>

The problem you have is :

this.state.restaurants[0].ratings.map

Of course you have only the first, you should write restaurant.ratings.map as the new array you want to map is the "ratings" section for each restaurant

answered Jul 5, 2020 at 12:12

jinwar

3962 silver badges8 bronze badges

4 Comments

Miami Larry Over a year ago

no, this wasn't it mate. i was expecting this answer because i already tried it check @yousaf answer

jinwar Over a year ago

I think I'm missing something because it seems to me I gave the exact same answer, to loop over ratings for each restaurant that the first map is sending you rather than "looping" over restaurants[0].ratings, I'm just calling restaurants item1 and rating item2 - his answer is best though as it uses your code ! Glad you have the answer though !

Miami Larry Over a year ago

sorry I didn't get your answer straight away,i am still a beginner and struggling to understand things, thanks tho, you have my upvote acceptance as an answer

jinwar Over a year ago

Ah no problem ! I re-read it twice also to be sure, you can leave the acceptance vote to Yousaf there's no problem about it :p He took the time to take your own code ;)

Collectives™ on Stack Overflow

How to render a nested array in react

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related