React Lists

Last Updated : 07 Aug, 2025

In lists, React makes it easier to render multiple elements dynamically from arrays or objects, ensuring efficient and reusable code. Since nearly 85% of React projects involve displaying data collections—like user profiles, product catalogs, or tasks—understanding how to work with lists.

To render a list in React, we will use the JavaScript array map() function. We will iterate the array using map() and return the required element in the form of JSX to render the repetitive elements. Here's a simple example that shows how to render a list of items:

JavaScript

function App() {
    const items = ['Apple', 'Banana', 'Cherry'];

    return (
        <div>
            <h1>My Fruit List</h1>
            <ul>
                {items.map((item, index) => (
                    <li key={index}>{item}</li>
                ))}
            </ul>
        </div>
    );
}

export default App;

Output

In this example

The .map() function loops over the items array.
Each item is rendered inside an <li> tag.
The key prop should be added to uniquely identify each list item.

Note
Use a unique identifier like id when available.
Avoid using array indexes as keys unless necessary (e.g., static lists without reordering).

const users = [
    { id: 1, name: "Jay" },
    { id: 2, name: "Ajay" },
    { id: 3, name: "Vijay" }
];

Why 'key' Prop is Important in React Lists

The key prop is essential in React when rendering lists because it helps to identify which items have changed, been added, or removed. This allows React to efficiently update and re-render only the changed items in the DOM, rather than re-rendering the entire list.

List with Objects

Lists can also be created using objects where each item contains multiple properties.

JavaScript

const users = [
    { id: 1, name: 'Geeks', age: 30 },
    { id: 2, name: 'for', age: 25 },
    { id: 3, name: 'Geeks', age: 20 },
];
const App = () => {
    return (
        <ul>
            {users.map((user) => (
                <li key={user.id}>
                    {user.name} is {user.age} years old.
                </li>
            ))}
        </ul>
    );
}

export default App;

Output

Geeks is 30 years old.
for is 25 years old.
Geeks is 20 years old.

Conditional Rendering in Lists

Sometimes, you may want to render items conditionally based on certain conditions.

JavaScript

const App = () => {
    const users = [
        { id: 1, name: 'geeks', age: 30 },
        { id: 2, name: 'for', age: 25 },
        { id: 3, name: 'geeks', age: 35 },
    ];
    return (
        <ul>
            {users.map((user) => (
                user.age > 30 ? (
                    <li key={user.id}>{user.name} is over 30 years old</li>
                ) : (
                    <li key={user.id}>{user.name} is under 30 years old</li>
                )
            ))}
        </ul>
    );
};

export default App;

Output

geeks is under 30 years old
for is under 30 years old
geeks is over 30 years old

List with a Click Event

A "List with a Click Event" in React typically refers to displaying a list of items (such as an array) on the screen, where each item is associated with an event handler (such as onClick) that executes a function when the item is clicked.

JavaScript

const App = () => {
    const COMPANY = ["GEEKS", "FOR", "GEEKS"];
    const handleClick = (COMPANY) => {
        alert(`You clicked on ${COMPANY}`);
    };

    return (
        <ul>
            {COMPANY.map((COMPANY, index) => (
                <button key={index} onClick={() => handleClick(COMPANY)}>
                    {COMPANY}
                </button>
            ))}
        </ul>
    );
};
export default App;