Rendering Lists and Keys
You can use the map()
function to render a list of items in React. Each item should have a unique key
.
const items = ['Apple', 'Banana', 'Orange'];
function FruitList() {
return (
<ul>
{items.map((fruit, index) => (
<li key={index}>{fruit}</li>
))}
</ul>
);
}
- Keys help React identify which items changed, are added, or removed.
- Use stable, unique keys when possible instead of array indexes.