Mapa je typ sběru dat, kde jsou data uložena ve formě párů. Obsahuje unikátní klíč. Hodnota uložená v mapě musí být namapována na klíč. Do map() nemůžeme uložit duplicitní pár. Je to kvůli jedinečnosti každého uloženého klíče. Slouží především k rychlému vyhledávání a vyhledávání dat.
V Reactu je ?mapa? metoda používaná k procházení a zobrazení seznamu podobných objektů komponenty. Mapa není funkcí Reactu. Místo toho je to standardní funkce JavaScriptu, kterou lze volat na libovolném poli. Metoda map() vytvoří nové pole voláním poskytnuté funkce na každém prvku ve volajícím poli.
Příklad
V daném příkladu funkce map() vezme pole čísel a zdvojnásobí jejich hodnoty. Nové pole vrácené map() přiřadíme proměnné doubleValue a zaprotokolujeme.
var numbers = [1, 2, 3, 4, 5]; const doubleValue = numbers.map((number)=>{ return (number * 2); }); console.log(doubleValue); V Reactu se metoda map() používá pro:
1. Procházení prvku seznamu.
Příklad
import React from 'react'; import ReactDOM from 'react-dom'; function NameList(props) { const myLists = props.myLists; const listItems = myLists.map((myList) => <li>{myList}</li> ); return ( <h2>React Map Example</h2> <ul>{listItems}</ul> ); } const myLists = ['A', 'B', 'C', 'D', 'D']; ReactDOM.render( , document.getElementById('app') ); export default App; Výstup
2. Procházení prvku seznamu pomocí kláves.
Příklad
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) => ); return ( <h2>React Map Example</h2> <ul> {listItems} </ul> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getElementById('app') ); export default App; Výstup
