Question 2

Design and develop a class component in React that

• Displays a list of restaurants, where each restaurant contains a nested list of menu items
• Apply unique keys for each item.

RestaurantList.jsx

import React, { Component } from "react";

class RestaurantList extends Component {
  // Data is now a class property, initialized once.
  restaurants = [
      {
        id: 1,
        name: "Pizza Place",
        menu: [
          { id: "p1", item: "Margherita" },
          { id: "p2", item: "Pepperoni" },
          { id: "p3", item: "BBQ Chicken" },
          { id: "p4", item: "Vegetarian" },
        ],
      },
      {
        id: 2,
        name: "Sushi Bar",
        menu: [
          { id: "s1", item: "California Roll" },
          { id: "s2", item: "Tuna Sashimi" },
          { id: "s3", item: "Tempura" },
          { id: "s4", item: "Miso Soup" },
        ],
      },
    ];

// "this.restaurants.map" to access the property
// destructuring {} for simpler access to items
  render() {
    return (
      <div className="restaurant-list">
        <h2>Restaurant Menu List</h2>
        <ul>
          {this.restaurants.map( ( {id, name, menu} ) => (
            <li key={id}>
              <h3>{name}</h3>
              <ul>
                {menu.map( ({id, item}) => (
                  <li key={id}>{item}</li>
                ))}
              </ul>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default RestaurantList;

// Composite key logic could have been used if Destructurin was not done
// <li key={`${restaurant.id}-${menuItem.id}`}>

Old Code

import React, { Component } from "react";

class RestaurantList extends Component {
  render() {
    const restaurants = [
      {
        id: 1,
        name: "Pizza Place",
        menu: [
          { id: 1, item: "Margherita" },
          { id: 2, item: "Pepperoni" },
          { id: 3, item: "BBQ Chicken" },
          { id: 4, item: "Vegetarian" },
        ],
      },
      {
        id: 2,
        name: "Sushi Bar",
        menu: [
          { id: 1, item: "California Roll" },
          { id: 2, item: "Tuna Sashimi" },
          { id: 3, item: "Tempura" },
          { id: 4, item: "Miso Soup" },
        ],
      },
      {
        id: 3,
        name: "Burger Joint",
        menu: [
          { id: 1, item: "Cheeseburger" },
          { id: 2, item: "Bacon Burger" },
          { id: 3, item: "Veggie Burger" },
          { id: 4, item: "Fries" },
        ],
      },
    ];
	// Using component key for menue list
    return (
      <div className="restaurant-list">
        <h2>Restaurant Menu List</h2>
        <ul>
          {restaurants.map((restaurant) => (
            <li key={restaurant.id}>
              <h3>{restaurant.name}</h3>
              <ul>
                {restaurant.menu.map((menuItem) => (
                  <li key={`${restaurant.id}-${menuItem.id}`}>
                    {menuItem.item}
                  </li>
                ))}
              </ul>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default RestaurantList;