TheDeveloperBlog.com

Home | Contact Us

C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML

React Map

React Map with ReactJS Tutorial, ReactJS Introduction, ReactJS Features, ReactJS Installation, Pros and Cons of ReactJS, AngularJS vs ReactJS, Reactnative vs ReactJS, ReactJS Router, ReactJS Flux Concept, ReactJS Animations, ReactJS Discussion, ReactJS Quick Guide, etc.

<< Back to REACT

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.

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

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

    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
    Next TopicReact Table




    Related Links:

    .Net

    .NET Array Dictionary List String 2D Async DataTable Dates DateTime Enum File For Foreach Format IEnumerable If IndexOf Lambda LINQ Parse Path Process Property Regex Replace Sort Split Static StringBuilder Substring Switch Tuple

    Java

    Core Array ArrayList HashMap String 2D Cast Character Console Deque Duplicates File For Format HashSet If IndexOf Lambda Math ParseInt Process Random Regex Replace Sort Split StringBuilder Substring Switch Vector While

    Related Links

    Adjectives Ado Ai Android Angular Antonyms Apache Articles Asp Autocad Automata Aws Azure Basic Binary Bitcoin Blockchain C Cassandra Change Coa Computer Control Cpp Create Creating C-Sharp Cyber Daa Data Dbms Deletion Devops Difference Discrete Es6 Ethical Examples Features Firebase Flutter Fs Git Go Hbase History Hive Hiveql How Html Idioms Insertion Installing Ios Java Joomla Js Kafka Kali Laravel Logical Machine Matlab Matrix Mongodb Mysql One Opencv Oracle Ordering Os Pandas Php Pig Pl Postgresql Powershell Prepositions Program Python React Ruby Scala Selecting Selenium Sentence Seo Sharepoint Software Spellings Spotting Spring Sql Sqlite Sqoop Svn Swift Synonyms Talend Testng Types Uml Unity Vbnet Verbal Webdriver What Wpf