Map is a type of data structure or data collection that is used to store the data in the form of key and value pairs. Each pair has a unique key in a map, and the value stored in each pair must be mapped to its unique key.

Maps are useful when searching and looking up the data and the stored key’s uniqueness.

In ReactJs, the maps are used for traversing or displaying the list of similar objects of a component. The map method is a standard JavaScript function and not just a ReactJs feature that could be called on an array. A new array is made using the map() method, and a function is called on each element of the array.

Example:

Here, we have an array of numbers. The map.method() will take the array of numbers and make a square of each element of the array.

Now, we will assign the new array created by the map to squareValue and then log the new array to it.

Let us see the code implementation:

var arrayOfNumbers = [1, 2, 3, 4, 5];  

const squareValue = arrayOfNumbers.map((number)=>{  

    return (number * number);  

});  

console.log(squareValue); 

Post Graduate Program: Full Stack Web Development

in Collaboration with Caltech CTMEEnroll Now
Post Graduate Program: Full Stack Web Development

Map Method in ReactJS: Usage

  • Traverse a List of Elements 

Let us see an example of how to traverse a list of elements using the map method.

Example:

import React from 'react';  

import ReactDOM from 'react-dom';  

function FoodListComponent(props) {  

  const foodLists = props.foodLists; 

  const foodItems = foodLists.map((foodItem) =>  

    <li>{foodItem}</li>  

  );  

  return (  

    <div>  

          <h2>Example of React Map</h2>  

              <ul>{foodItems}</ul>  

    </div>  

  );  

}  

const foodLists = ["Pizza", "Burger", "Pasta", "Noodles", "Brownie"];  

ReactDOM.render(  

  <FoodListComponent foodLists={foodLists} />,  

  document.getElementById('app')  

);  

export default App;  

Output:

Map_In_ReactJs_1

In the above example, we saw how we could use the map method on an array of strings called foodLists and return each array item to a new unordered list.

Free ReactJS for Beginners Course

Master the Basics of ReactJSStart Learning
Free ReactJS for Beginners Course

  • Traverse a List of Elements Using Keys

Now let us go through an example to see how we can traverse through the list of elements using keys.

Example:

import React from 'react';  

import ReactDOM from 'react-dom';  

function ListItem(props) {  

  return <li>{props.value}</li>;  

function NumberList(props) {  

  const numbers = props.numbers;  

  const numberItems = numbers.map((number) =>  

    <ListItem key={number.toString()}  

              value={number} />  

  );  

  return (  

    <div>  

      <h2>Example of using React Map with keys</h2>  

          <ul> {numberItems} </ul>  

    </div>  

  );  

}  

const numbers = [1, 2, 3, 4, 5];  

ReactDOM.render(  

  <NumberList numbers={numbers} />,  

  document.getElementById('app')  

);  

export default App;  

Output:

map_In_ReactJs_2

In the above example, we used the map method with keys on the array of numbers and took each number’s string value as the key of each numerical value.

Advance your career as a MEAN stack developer with the Full Stack Web Developer - MEAN Stack Master's Program. Enroll now!

Conclusion

In ReactJS, the map() method is most commonly used for rendering a list of data to the DOM. It is straightforward to use and, therefore, very popular. In this article, we saw that the map method plays a very significant role in iterating over an array of items. Using this method, we can also manipulate the array’s data.

This was all about the map() function in ReactJS. Today, in this time and age, along with data structure and algorithms, your development skill is equally crucial to making a mark in the tech industry. Therefore, a tech professional should always keep himself updated with the latest technology and software in the field of web development. 

Simplilearn offers some excellent Full Stack Web Development Certificate Courses that you can check out. These courses are designed to help you master both the front-end and back-end with different technologies and tools like AngularMVC and SpringBoot.

If you are looking for short-term courses to upgrade your skillset, Simplilearn also offers free online skill-up courses in domains like data science, business analytics, software development, AI, and machine learning. 

About the Author

SimplilearnSimplilearn

Simplilearn is one of the world’s leading providers of online training for Digital Marketing, Cloud Computing, Project Management, Data Science, IT, Software Development, and many other emerging technologies.

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.
  • *According to Simplilearn survey conducted and subject to terms & conditions with Ernst & Young LLP (EY) as Process Advisors