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.
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(); |
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; |
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: 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.
