React Lists and Keys: Manage Dynamic Elements

React Lists and Keys help you show many items and keep each item tracked for updates.

What do Lists and Keys Mean in React?

React can show many items on a page, and each item holds data for a user. Lists in React allow you to draw items from data arrays and show them in a clean order.

A key in React helps the library know which item changes or stay in the list after updates. This process lets React update only what has changed instead of redrawing all items.

Here is a quick example:

const names = ['Ali', 'Sara', 'John'];
function NameList() {
  return (
    <ul>
      {names.map(name => <li key={name}>{name}</li>)}
    </ul>
  );
}

This example shows you how a small array can draw items on a web page. Each item in the array has a unique key so React can track it during changes.

A news site can show new articles as they arrive without removing old ones. Keys help React know which article is new and which article stays on the page.

Keys help React match items between renders, so it updates only what must change. Without keys, React may reorder items or create wrong updates, which can break the page view.

How to Use map() to Render Lists in React

The map() method in JavaScript loops over arrays and returns new elements. React uses map() to draw each element of the list on the page with a key.

Here is an example:

const fruits = ['Apple', 'Orange', 'Mango'];
function FruitList() {
  return (
    <ul>
      {fruits.map(fruit => <li key={fruit}>{fruit}</li>)}
    </ul>
  );
}

This example shows a simple array with three fruits drawn on the page. React uses map() to loop through each fruit and a key to mark each item.

Here is another example:

const users = [
  { id: 1, name: 'Ali' },
  { id: 2, name: 'Sara' }
];
function UserList() {
  return (
    <div>
      {users.map(user => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

This example shows how to render objects that hold an id and name for each user. React uses the id as a key to keep each user stable after any change.

Examples

Add Items to a List:

const [items, setItems] = React.useState(['Pen', 'Book']);
function AddItem() {
  const addNew = () => setItems([...items, 'New']);
  return (
    <div>
      <button onClick={addNew}>Add</button>
      <ul>
        {items.map((item, index) => <li key={index}>{item}</li>)}
      </ul>
    </div>
  );
}

This example shows a stateful list that can add a new item. React tracks each item by index, so a new one can appear without breaking other items.

Nested Lists:

const categories = [
  { id: 1, name: 'Fruits', items: ['Apple', 'Mango'] },
  { id: 2, name: 'Tools', items: ['Hammer', 'Saw'] }
];
function NestedList() {
  return (
    <div>
      {categories.map(cat => (
        <div key={cat.id}>
          <h3>{cat.name}</h3>
          <ul>
            {cat.items.map((item, idx) => <li key={idx}>{item}</li>)}
          </ul>
        </div>
      ))}
    </div>
  );
}

This example shows a list inside another list. Each category uses an id as a key, and each nested item uses an index to help React track each one.

Complex Component Lists:

function Product({ product }) {
  return <div>{product.title} - {product.price}</div>;
}
const products = [
  { id: 1, title: 'Phone', price: '$200' },
  { id: 2, title: 'Tablet', price: '$300' }
];
function ProductList() {
  return (
    <div>
      {products.map(prod => <Product key={prod.id} product={prod} />)}
    </div>
  );
}

This example shows how you can render a custom component for each product. React uses the id to keep each product in place even when data updates.

Wrapping Up

You learned how lists work in React and how keys help React keep track of items.

Here is a quick recap:

• You can show lists in React with map(). Each item needs a key, and keys from data keep items stable after changes.

FAQs

const items = ['Apple','Banana','Mango'];
<ul>
  {items.map((item,index)=>
    <li key={index}>{item}</li>
  )}
</ul>

// Wrong
items.map((item,index)=><li key={index}>{item}</li>)
// Right
items.map(item=><li key={item.id}>{item.name}</li>)

Similar Reads