Open In App
Related Articles

What is typical pattern for rendering a list of components from an array of data in ReactJS ?

Improve Article
Save Article
Like Article

The pattern for rendering a list of components from an array of data can be done by mapping all individual custom pieces of data to the component. With the map function, we will map every element data of the array to the custom components in a single line of code. 

Let’s create a react app and see the pattern for rendering a list of components from an array of data.

Creating React Application

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

npx create-react-app example

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

cd example

Step 3: Create folder components inside src folder of react project directory and inside the components folder create files List.jsx.

Project structure: It will look like this.

Example 1: Basic example of rendering a list. Write down the following code in index.js, App.js and List.jsx file.


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
    <App />
// If you want to start measuring 
// performance in your app, pass a 
// function to log results 


import React from "react";
import List from "./components/List";
function App() {
  const Users = [
    // Array of  students data
      name: "Deepak",
      rollNo: "123",
      name: "Yash",
      rollNo: "124",
      name: "Raj",
      rollNo: "125",
      name: "Rohan",
      rollNo: "126",
      name: "Puneet",
      rollNo: "127",
      name: "Vivek",
      rollNo: "128",
      name: "Aman",
      rollNo: "129",
  return (
    <div className="App">
            Rendering List of components
            with array of data
        {, index) => {
        return <List key={index} 
            name={} rollNo={user.rollNo} />;
export default App;


import React from "react";
function List(props) {
    return (
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                height: "100%",
                backgroundColor: "#fafafa",
                margin: "20px",
            <div>Name of student {}</div>
            <div>Roll number of student {props.roll}</div>
export default List;

Step to run the application: Run the application using the following command:

npm start

Output: We have taken an array of students’ data in our App.js file then we created a component List.jsx in which the array data is passed and with help of the mapping function we mapped the List component with an array of data. Then with help of props, we are using those data inside our component.

List of component

This pattern of rendering a list of the component using an array of data avoid repetition and list out our components with the individual element data.

Last Updated : 23 Feb, 2022
Like Article
Save Article
Similar Reads
Related Tutorials