How to use React Map? | React Map | React Tutorial

React Map | React Tutorial

In React, This map() function is the standard JavaScript function that is used to iterate over an array and manipulate or change data items. This is a data collection type. This map() function is most commonly used for rendering a list of data to the DOM and for fast searching of data. The map() function stores data in the form of pairs and contains a unique key. Each key is unique in itself, that is why  We can't store a duplicate pair in the map(). The stored value in the map must be mapped to the key. 

In React, The map() function creates a new array by calling a provided function on every element in the calling array. By using the map() function we can display a list of similar objects of a component by traversing. 

In the below-given example, the map() method takes an array of numbers and double their values. Then, assign the new array returned by map() to the variable doubleValue and log it.

var numbers = [1, 2, 3, 4, 5];   
const doubleValue = numbers.map((number)=>{   
    return (number * 2);   
});   
console.log(doubleValue);   

After running the above code gives output  [2, 4, 6, 8, 10] to the console.

Embedding map() in JSX:

JSX permits embedding any expression in curly braces so we could inline the map() result.

import React from 'react';   
import ReactDOM from 'react-dom';   
function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number} />
      )}
    </ul>
  );
}

Below we have discussed the usage of map() function:

1. Traversing the list element

In below-given code accepts an array of and outputs a list of elements. 

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
     <div>  
          <h2>Traversal of List elements</h2>  
              <ul>{listItems}</ul>  
    </div>  
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

output:

2. Extracting the Components with Keys

It's always good to extract a component. if the map() body is too nested.

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 listItems = numbers.map((number) => 
    <ListItem key={number.toString()} value={number} />
  );
  return (
   <div>
      <h1> Extracting Components with Keys</h1>
      <ul>
         {listItems}
      </ul>
   </div>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

output: