How to Map Data into Components using ReactJS?
Mapping data in react js component is a comman practice to render the lists and repeating elements. In this article, we will have a users data and we will map it to react components to display the users information in the react app
Prerequisites:
Approach
To map data in components we will be using JavaScript’s Array map method. We will define Info component that takes data as a prop. Iterate the user data and pass it to info component as prop and return the required Users list.
We can also map the data manually to the components.
Steps to Map data into React Component
Step 1: Initialize React Project
npx create-react-app users-listStep 2: Swtich to project directory
cd users-listProject Structure:
Project Structure
List of Dependencies in the package.json file
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
Step 3: Prepare the data
Store the data in array of objects in key-value pairs as given below:
// Filename - src/list.js
const Users = [
{
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"
}
];
export default Users;
Step 4: Create Info Component
Define a component (Info.js) that takes the name and rollno as prop and render them on UI.
// Filename - src/Info.js
import React from "react";
function Info(props) {
return (
<div
style={{ border: "1px solid black", margin: "10px", width: "20%" }}
>
<p> {props.name} </p>
<p> {props.rollNo}</p>
</div>
);
}
export default Info;
Step 5: Map the Data into React Component
Import the users list and info component and map the data using array map, passing the required props to Info component.
Example 1: This example uses array map method to iterate the users and passes data as props to render the list of users.
// Filename - src/App.js
import React from "react";
import "./App.css";
import Users from "./list";
import Info from "./Info";
function App() {
return (
<div style={{ margin: "40px" }}>
<h1 style={{ color: "green" }}> Geeks For Geeks </h1>
<p> Mapping Data to component in React js. </p>
{Users.map((e) => {
return <Info name={e.name} rollNo={e.rollNo} />;
})}
</div>
);
}
export default App;
Step 6: Run the Application
Use the below command to run the application.
npm startOutput :
Example 2: This example uses manual iterations to map the data to Info Component.
// Filename - src/App.js
import React from "react";
import "./App.css";
import Users from "./list";
import Info from "./Info";
function App() {
return (
<div style={{ margin: "40px" }}>
<h1 style={{ color: "green" }}> Geeks For Geeks </h1>
<p> Mapping Data to component in React js. </p>
<Info name={Users[0].name} rollNo={Users[0].rollNo} />
<Info name={Users[1].name} rollNo={Users[1].rollNo} />
<Info name={Users[2].name} rollNo={Users[2].rollNo} />
<Info name={Users[3].name} rollNo={Users[3].rollNo} />
<Info name={Users[4].name} rollNo={Users[4].rollNo} />
<Info name={Users[5].name} rollNo={Users[5].rollNo} />
<Info name={Users[6].name} rollNo={Users[6].rollNo} />
</div>
);
}
export default App;
Output:
From both the above example, we get the same output but one can observe by using the map function in the App.js file, mapping array data to component becomes more easy and less code is needed.
