Adding keys to list

        
// by adding index on the key property 
<section>
  <ul>
  {props.dishes.map((dish, index ) => (
    <li key={index}>{dish}</li>
))}
  </ul>
</section>

// by creating an object first and adding an index property and a name property
const dishes = [
  "Black Bean Soup",
  "Macaroni and Cheese",
  "Salmon and Potatoes"
      ];

const dishObjects = dishes.map((dish, i) => (
  {
    id: i,
    title: dish
  }
))

function Main(props) {
        return (
          <section>
            <ul>
              {props.dishes.map((dish) => (
                <li key={dish.id}>{dish.title}</li>
              ))}
            </ul>
          </section>
        );
      }