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>
    )
  }
}

Answer 1

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>  
        )
    })
}

Answer 2

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