I used map method for array of objects items but one item inside this array is also array of object So I need to take its properties

Question

this is in the shared folder inside src in react app

export const DISHES =  [
        {
        id: 0,
        name:'sss',
        image: 'assets/images/ssss.png',
        category: 'dddd',
        comments: [
            {
            id: 0,
            rating: 5,
            comment: "dddd",
            author: "ddd",
            date: "3353"
            }
    ]

this is in App.js

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      dishes: DISHES,
    };
  }
  
  render() {
    return (
      <div className="App">
        <Navbar dark color="primary">
          <div className="container">
            <NavbarBrand href="/">Ristorante Con Fusion</NavbarBrand>
          </div>
        </Navbar>
        <Menu dishes={this.state.dishes}/>
      </div>
    );
  }
}

and this render method from menuComponent.js

render() {
    const menu = this.props.dishes.map((dish) => {
      return (
        <div className="col-12 col-md-6 my-1">
          <Card key={dish.id} onClick={() => this.onDishSelect(dish)}>
            <CardImg width="100%" src={dish.image} alt={dish.name} />
            <CardImgOverlay>
              <CardTitle>{dish.name}</CardTitle>
            </CardImgOverlay>
      {/* <p>{dish.map(dish => <div>{dish.comments}</p> */}
          </Card>
        </div>
      );
    });
    return (
      <div className="container">
        <div className="row">{menu}</div>
        <div className="row">{this.renderDish(this.state.selectedDish)}</div>
      </div>
    );

  }

Now, I need to use the comments property that has an array of object and himself is one of the map items that I used before in the render Method

Answer 1

To map the inner array you just need to access the properties correctly. comments property of the dish , and the comment property of each element of the comments array, this can be object destructured for brevity.

dish.comments.map(({ comment }) => <div>{comment}</div>)

Code:

render() {
    const menu = this.props.dishes.map((dish) => {
      return (
        <div className="col-12 col-md-6 my-1">
          <Card key={dish.id} onClick={() => this.onDishSelect(dish)}>
            <CardImg width="100%" src={dish.image} alt={dish.name} />
            <CardImgOverlay>
              <CardTitle>{dish.name}</CardTitle>
            </CardImgOverlay>
            <p>
              {dish.comments.map(({ comment }) => <div>{comment}</div>)}
            </p>
          </Card>
        </div>
      );
    });
    return (
      <div className="container">
        <div className="row">{menu}</div>
        <div className="row">{this.renderDish(this.state.selectedDish)}</div>
      </div>
    );
  }