Karta je vrsta zbirke podataka gdje se podaci pohranjuju u obliku parova. Sadrži jedinstveni ključ. Vrijednost pohranjena u mapi mora se preslikati na ključ. Ne možemo pohraniti duplicirani par u map(). To je zbog jedinstvenosti svakog pohranjenog ključa. Uglavnom se koristi za brzo pretraživanje i traženje podataka.
U Reactu, ?map? metoda koja se koristi za obilazak i prikaz popisa sličnih objekata komponente. Mapa nije značajka Reacta. Umjesto toga, to je standardna JavaScript funkcija koja se može pozvati na bilo kojem nizu. Metoda map() stvara novi niz pozivanjem navedene funkcije na svakom elementu u nizu koji poziva.
Primjer
U navedenom primjeru funkcija map() uzima niz brojeva i udvostručuje njihove vrijednosti. Dodjeljujemo novi niz koji vraća map() varijabli doubleValue i bilježimo ga.
var numbers = [1, 2, 3, 4, 5]; const doubleValue = numbers.map((number)=>{ return (number * 2); }); console.log(doubleValue); U Reactu se metoda map() koristi za:
1. Prelazak elementa liste.
Primjer
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; Izlaz
2. Kretanje po elementu liste s tipkama.
Primjer
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; Izlaz
