React Lists

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:

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.

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.

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.

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;

Output

In this example

• Defines a function handleClick that shows an alert with the clicked item.
• The alert displays the name of the clicked item from the COMPANY array.
• Starts returning JSX for rendering the list.
• Iterates over the COMPANY array to generate a button for each item.
• Renders a button with an onClick event that calls handleClick when clicked.

Suggested Quiz

Edit Quiz

4 Questions

Which method is commonly used in React to render lists from arrays?

• A

  forEach()
  

• B

  map()

• C

  filter()

• D

  reduce()

Explanation:

The article explains that React uses the JavaScript map() function to iterate over arrays and return JSX elements for rendering dynamic lists.

Why is the key prop important when rendering lists in React?

• A

  It helps style the list elements.
  

• B

  It ensures that list items display in alphabetical order.

• C

  It helps React identify which items changed, added, or removed.

• D

  It prevents runtime errors.

Explanation:

React uses the key prop to efficiently update the DOM by tracking list item changes. This improves rendering performance.

Which of the following is the recommended way to assign keys in a list?

• A

  Always use array indexes
  

• B

  Use random numbers

• C

  Use unique identifiers like id when available

• D

  Use object reference memory address

Explanation:

The article clearly states to use unique identifiers like id and avoid using array indexes unless the list is static and does not reorder.

What will the following code output for a user with age = 25 in the conditional rendering example?

user.age > 30 ?

<li>{user.name} is over 30 years old</li> :

<li>{user.name} is under 30 years old</li>

• A

  user.name is over 30 years old
  

• B

  user.name is under 30 years old

• C

  Nothing will be displayed

• D

  It results in an error

Explanation:

Since 25 > 30 is false, React renders the second JSX branch:
user.name is under 30 years old.

Quiz Completed Successfully

Your Score :   2/4

Accuracy :  0%

Login to View Explanation

1/4 1/4 < Previous Next >