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

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. 

Prerequisites:

• NodeJS or NPM
• React JS

Steps to Create the 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:

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

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

Javascript

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring
// performance in your app, pass a
// function to log results
reportWebVitals();

Javascript

//App.js
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">
        <h1>
            Rendering List of components
            with array of data
        </h1>
        {Users.map((user, index) => {
        return <List key={index}
            name={user.name} rollNo={user.rollNo} />;
        })}
    </div>
  );
}

export default App;

Javascript

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

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

export default List;

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

npm start

Output:

List of component