Tutorials › React Modern Development › Lists and Keys

Lists and Keys

5 min read Quiz at the end

Render lists with .map() returning JSX. Always provide a unique stable key prop: items.map(item => <Card key={item.id} />). Keys help React track which items changed. Never use array index as key for dynamic lists.

Rendering Lists

function UserList({ users }) {
  return (
    
      {users.map(user => (
           {/* key must be unique and stable */}
          {user.name}
          {user.email}
        
      ))}
    
  );
}

// Anti-pattern — never use index as key for mutable lists
// users.map((u, i) => ...
)

← Conditional Rendering Next: Forms in React →

Quick Access

Lists and Keys

Rendering Lists