Rendering Lists & Keys

Using Array.map() in JSX and the critical role of key props

« Side Effects with useEffect« Previous Forms, Controlled Components & Inputs »Next »

In React, you will render lists of items using JavaScript's built-in .map() method. Keys help React identify which items have changed, are added, or are removed.

Why Keys Are Essential

Keys must be provided to each element in a mapped array.

Keys must be unique among siblings.

Keys help React efficiently re-order and reconcile the Virtual DOM without recreating entire lists.

Rendering Dynamic Lists with Keys

Try It Yourself »

function TrackList({ tracks }) {
  return (
    <ul className="space-y-2">
      {tracks.map((track) => (
        <li 
          key={track.id} 
          className="p-3 bg-white shadow rounded border flex justify-between"
        >
          <span className="font-semibold">{track.title}</span>
          <span className="text-gray-500">{track.totalLessons} Lessons</span>
        </li>
      ))}
    </ul>
  );
}

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

Why does React require a unique "key" prop on items rendered in a loop?

« Previous: Side Effects with useEffect Next: Forms, Controlled Components & Inputs »