React Lists

React Lists

You will frequently need to build collections of repeated elements. You can include them effortlessly in JSX using the JavaScript array map() function.

Rendering Lists with Keys

When generating lists in React, you must provide a unique key attribute to each top-level list item. Keys help React efficiently identify exactly which items have changed, been added, or been removed.

function ItemList({ items }) {
  return (
    <ul>
      {items.map((item) => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}