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);
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!
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.