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