React Map

A map is a data collection type where data is stored in the form of pairs. It contains a unique key. The value stored in the map must be mapped to the key. We cannot store a duplicate pair in the map(). It is because of the uniqueness of each stored key. It is mainly used for fast searching and looking up data.

In React, the ?map? method used to traverse and display a list of similar objects of a component. A map is not the feature of React. Instead, it is the standard JavaScript function that could be called on any array. The map() method creates a new array by calling a provided function on every element in the calling array.

Example

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

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

In React, the map() method used for:

1. Traversing the list element.

Example

snippet
import React from 'react'; 
import ReactDOM from 'react-dom'; 

function NameList(props) {
  const myLists = props.myLists;
  const listItems = myLists.map((myList) =>
    
  • {myList}
  • ); return (

    React Map Example

      {listItems}
    ); } const myLists = ['A', 'B', 'C', 'D', 'D']; ReactDOM.render( , document.getElementById('app') ); export default App;

    Output

    React Map

    2. Traversing the list element with keys.

    Example

    snippet
    import React from 'react'; 
    import ReactDOM from 'react-dom'; 
    
    function ListItem(props) {
      return 
  • {props.value}
  • ; } function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => ); return (

    React Map Example

      {listItems}
    ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getElementById('app') ); export default App;

    Output

    React Map
    Related Tutorial
    Follow Us
    https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
    Contents +