How to Render Lists in React?

In React, rendering lists of data is a common task. There are multiple approaches to achieve this. In this article we will explore various approaches to render lists in React.

Steps to Setup a React App:

Step 1: Create a React application using the following command.

npx create-react-app myapp

Step 2: Navigate to the project directory

cd myapp

Project Structure:

Approach 1: Using map() method

This approach uses map() method which is used to iterate over an array and transform each element into a new array of React elements. It is used in React to render lists of elements, as it allows us to easily generate JSX for each item in the array.

Syntax of map() method:

Array.map((currentValue, index)=>(
// method body
))

Example: Below example describes how we can use map method to render lists of data.

Javascript

// page.js
import React from "react";

const languages = [
    { name: "JavaScript", founder: "Brendan Eich" },
    { name: "Python", founder: "Guido van Rossum" },
    { name: "Java", founder: "James Gosling" },
    { name: "C++", founder: "Bjarne Stroustrup" },
    { name: "Ruby", founder: "Yukihiro Matsumoto" },
];

function LanguageList() {
    return (
        <div style={{ textAlign: "center" }}>
            <h1 style={{ color: "green" }}>GeeksForGeeks</h1>
            <h2 style={{ textAlign: "center", marginBottom: "20px" }}>
                Rendering List using map method
            </h2>
            <ul style={{ listStyleType: "none", padding: 0 }}>
                {languages.map((language, index) => (
                    <li
                        key={index}
                        style={{
                            marginBottom: "10px",
                            padding: "10px",
                            backgroundColor: "#f4f4f4",
                            borderRadius: "5px",
                        }}
                    >
                        <strong>{language.name}</strong> - Founder:{" "}
                        {language.founder}
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default LanguageList;

Output:

Approach 2: Using forEach() method

This approach uses forEach method which is be used to iterate over an array of items and perform side effects, such as rendering JSX elements for each item.

Example: Below is an example of how we can use forEach to render a list of items

Javascript

// page.js
import React from "react";

const languages = ["JavaScript", "Python", "Java", "C++", "Ruby"];
const listItems = [];

languages.forEach((language, index) => {
    listItems.push(<li key={index}>{language}</li>);
});

function LanguageList() {
    return (
        <div style={{ textAlign: "center" }}>
            <h1 style={{ color: "green" }}>GeeksForGeeks</h1>
            <h2 style={{ textAlign: "center", marginBottom: "20px" }}>
                Rendering List using forEach method
            </h2>
            <ul style={{ listStyleType: "none", padding: 0 }}>
                {listItems}
            </ul>
        </div>
    );
}

export default LanguageList;

Output: