Keys

If you run the code from the previous lesson, React will throw a warning in the console: “Warning: Each child in a list should have a unique ‘key’ prop.”

React needs a way to uniquely identify each item in a list so it knows which items are changed, added, or removed.

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" }
];

function UserList() {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Always use a unique ID from your data (like a database ID). Using the array index is a bad practice!