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

Javascript

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

npm start

Output:

List of component