Lists and Keys - Building Dynamic UI

Real apps deal with data mostly as arrays — products, comments, users. In React, rendering such lists is done with plain JavaScript's .map().

Basic List Rendering

const skills = ['React', 'Laravel', 'Node.js', 'MongoDB'];

function SkillList() {
  return (
    <ul>
      {skills.map(skill => (
        <li key={skill}>{skill}</li>
      ))}
    </ul>
  );
}

Why the "key" Prop Matters

The key on each list item tells React which item is which — so when the list changes (add/remove/reorder), React can correctly figure out which DOM element to reuse and which to create, instead of re-rendering the whole list.

const users = [
  { id: 101, name: 'Bikesh' },
  { id: 102, name: 'Sabin' },
];

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

Avoid Using the Index as a Key

// ❌ Avoid — if the list gets reordered/filtered, bugs can creep in
{items.map((item, index) => <li key={index}>{item.name}</li>)}

// ✅ Better — use a stable, unique id
{items.map(item => <li key={item.id}>{item.name}</li>)}

Index is only fine when a list will never be reordered, filtered, or have items inserted (a static, always-fixed list).

Key Takeaways

• .map() converts array data into JSX elements.
• key should always be a stable, unique value — a database id works best.
• Avoid using array index as a key when the list can change.