Adding keys to list
Fri Jun 17 2022 05:46:32 GMT+0000 (Coordinated Universal Time)
Saved by
@patdevwork
// 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>
);
}
content_copyCOPY
Comments