React Lists

In React, lists are used to display a collection of data in a structured way—just like in HTML where you might use <ul>, <ol>, or tables. But React allows you to dynamically render lists using JavaScript, especially with arrays.

For example, if you have an array of users, you can use React to loop through that array and show each user’s name on the screen.

Why Use Lists in React?

React is all about components and dynamic content. When your data is stored in arrays or objects (like from an API), you need a way to display each item properly.

React helps you do this efficiently with .map()—a JavaScript method that transforms each item in an array into something new (like a component or JSX element).

Example of a Simple List in React

Let’s say you have a list of fruits:

const fruits = ['Apple', 'Banana', 'Mango'];

You can render them like this in a React component:

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Mango'];

  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

Why the key Prop is Important

Notice the key={index} part? In React, keys help identify which items changed, added, or removed. This improves performance and prevents bugs during re-renders.

Important:

• Keys should be unique among siblings.
• If you have a unique ID in your data, use that instead of index.

Example with IDs:

const users = [
  { id: 1, name: 'Kirti' },
  { id: 2, name: 'Riya' }
];

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

Looping with .map() in JSX

React uses JavaScript expressions inside curly braces {}, so .map() is commonly used like this:

 {array.map(item => (
  <Component key={item.id} data={item} />
))}

This is better than using loops like for, because .map() returns a new array of JSX elements, which fits perfectly inside JSX.

Rendering Components in a List

You can render custom components too. For example:

function Fruit({ name }) {
  return <li>{name}</li>;
}

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Mango'];

  return (
    <ul>
      {fruits.map((fruit, index) => (
        <Fruit key={index} name={fruit} />
      ))}
    </ul>
  );
}

Common Mistakes to Avoid

1. Forgetting the key prop: React will give you a warning.
2. Using index as key: It’s okay for static lists, but not if items change frequently.
3. Modifying state directly in .map(): Always use pure functions.

List Rendering and State

Lists often come from state or props. Example with state:

import { useState } from 'react';

function TodoList() {
  const [tasks, setTasks] = useState([
    { id: 1, text: 'Learn React' },
    { id: 2, text: 'Build a project' }
  ]);

  return (
    <ul>
      {tasks.map(task => (
        <li key={task.id}>{task.text}</li>
      ))}
    </ul>
  );
}

You can also update the list by adding, removing, or filtering tasks with state.

Summary

Final Thoughts

React lists are powerful tools to show data in a clean, dynamic way. By combining JSX and .map(), you can easily build tables, menus, card layouts, or any kind of repeated UI. Just remember to use key properly and keep your data clean.