Open In App

How to use map() to Create Lists in ReactJS ?

Improve
Improve
Like Article
Like
Save
Share
Report

JavaScript array map() method is used to iterate through the data in the form of an array. This map() in react is used to create the list by iterating the data and transforming it into the list components using HTML tags.

Prerequisites

Approach

To use the map to create Lists in React JS we will store the data as an array and iterate using the map method. This map on iteration will transform the data into child components that can be used as a list by enclosing it in the parent div tag.

Creating React Application

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

npx create-react-app listmapdemo

Step 2: After creating your project folder i.e. listmapdemo, move to it using the following command:

cd listmapdemo

Project Structure

It will look like the following.

Project Structure

Example: While creating components using the map, react expects a key prop passed to each component being built. It will still render if the key is not passed, but you will see a warning from React about it in the console. In the App.js file, we have defined a list of fruits which is then mapped to a list of divs.

Javascript




// Filename - App.js
 
import React from "react";
 
function App() {
 
    // Declared an array of items
    const fruits = ["Apple", "Mango", "Banana", "GFG"];
 
    // Some styling for the items
    const styles = {
        backgroundColor: "white",
        width: "50px",
        marginBottom: "10px",
        padding: "10px",
        color: "green",
        boxShadow: "rgb(0,0,0,0.44) 0px 5px 5px",
    };
 
    return (
        <>
            {
                /*  This maps each array item to a div adds
                the style declared above and return it */
                fruits.map((fruit) => (
                    <div key={fruit} style={styles}>
                        {fruit}
                    </div>
                ))
            }
        </>
    );
}
 
export default App;


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:



Last Updated : 30 Oct, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads