How to map data into Components using ReactJS? - GeeksforGeeks

05 Jul, 2021
Map all individual custom pieces of data to the custom component. 
For example: Instead of writing custom components again and again with different props. I will make an array that contains all props and use the map() function to map the array element with a custom component in a single component call.
A map is a data collection type where data is stored in the form of key-value pairs. The value stored in the map must be mapped to the key. The map is a JavaScript function that can be called on any array. With the map function, we map every element of the array to the custom components in a single line of code. That means there is no need to call components and their props as array elements again and again.
Syntax:
var array = [1,2,3,4,5]
var PlusOne= array.map((e)=>{
   return (e+1);
 });
 // All array element value will increase by one.   
list.js: Contain an array with the user’s name and roll number in the form of key-value pairs.
Javascript
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;
Info.js: Username and roll number as props in the Info component.
Javascript
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;
Example: Mapping data from list.js file to custom Info component using the map function.
App.js: Import Users array and Info component in the App.js file. Use the map function to map each element of User arrays to the Info component. 
Javascript
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;
Output : 
Example 2: Mapping data from list.js file to Info component without using the map function.
App.js file: 
Javascript
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.
simranarora5sos
Picked
react-js
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Express.js express.Router() Function
Top 10 Angular Libraries For Web Developers
Convert a string to an integer in JavaScript
How to set the default value for an HTML <select> element ?
Set the value of an input field in JavaScript
How to Insert Form Data into Database using PHP ?
Client-Server Model
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
How to create footer to stay at the bottom of a Web page?