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.
← PrevNext →