In React the map() function is most commonly used for rendering a list of data to the DOM.

What exactly is map() function?

.map() function lets you manipulate the items in an array by iterating and accessing individual items, so to use it you have to attach .map() function to an array you want to iterate over.

Syntax:

let newArray = arr.map(function callback(currentValue [, index[, array]] {
// return element for newArray
} [, thisArg]

As you can see, map() function expects a callback as the argument and executes it once for each element in the array. From the callback parameters you can access the current element, the current index and the array itself.

The map() function also takes in an optional second argument, which you pass o use as this inside the callback → each time the callback executes, the returned value is then added to a new array.

Let’s see an example:

const list = [1,2,3,4]
const secList = list.map( (i) -> i*2 )

If we then call the console.log(secList) we would get the array [2,4,6,8].

Using map() in React

It is the best to explain it on example.

We have an array of objects that contain names of fruit and quantity:

const fruit = [
{ name: "Apple", quantity: 4 },
{ name: "Peach", quantity: 2 },
];

To display it to the DOM, we will have to use the map() function and return JSX from the callback function.

const Fruits = () => {  const fruit = [
{ name: "Apple", quantity: 4 },
{ name: "Peach", quantity: 2 },
];
return (
<div className="fruits">
{fruit.map( (item) => {
<div className="fruits__name"> {item.name} </div>
<div className="fruits__quantity"> {item.quantity} </div>
))}
</div>
);
};

If you try this yourself you will see that this will display all of fruits like this:

Ąpple
4
Peach
2

Electrical engineer that loves robotics, fun facts and cooking!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store