Learn About Map in ReactJS

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:

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.

Automation Test Engineer Master's Program

To learn about the automation of web applicationsExplore 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:

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 Post Graduate Program In Full Stack Web Development. Enroll now!

Become an Automation Test Engineer in 11 Months!

Automation Testing Masters ProgramExplore Program

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.