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:

• React JS
• Nodejs and npm
• JavaScript Array map

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-list

Step 2: Swtich to project directory

cd users-list

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 start

Output :

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.