Harita, verilerin çiftler halinde saklandığı bir veri toplama türüdür. Benzersiz bir anahtar içerir. Haritada saklanan değerin anahtarla eşlenmesi gerekir. Yinelenen bir çifti haritada () saklayamayız. Bunun nedeni, saklanan her anahtarın benzersiz olmasıdır. Esas olarak hızlı arama ve veri aramak için kullanılır.

React'ta ?harita? Bir bileşenin benzer nesnelerinin listesini gezmek ve görüntülemek için kullanılan yöntem. Harita, React'in özelliği değildir. Bunun yerine herhangi bir dizide çağrılabilecek standart JavaScript işlevidir. Map() yöntemi, çağıran dizideki her öğe üzerinde sağlanan bir işlevi çağırarak yeni bir dizi oluşturur.

Örnek

Verilen örnekte, map() işlevi bir sayı dizisini alır ve değerlerini iki katına çıkarır. Map() tarafından döndürülen yeni diziyi doubleValue değişkenine atar ve günlüğe kaydederiz.

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

React'ta map() yöntemi şunun için kullanılır:

1. Liste öğesinin üzerinden geçilmesi.

Java vaka bildirimi

Örnek

 import React from &apos;react&apos;; import ReactDOM from &apos;react-dom&apos;; function NameList(props) { const myLists = props.myLists; const listItems = myLists.map((myList) =&gt; <li>{myList}</li> ); return ( <h2>React Map Example</h2> <ul>{listItems}</ul> ); } const myLists = [&apos;A&apos;, &apos;B&apos;, &apos;C&apos;, &apos;D&apos;, &apos;D&apos;]; ReactDOM.render( , document.getElementById(&apos;app&apos;) ); export default App; 

Çıktı

1 milyonun 10'u

2. Liste öğesini tuşlarla gezme.

Örnek

 import React from &apos;react&apos;; import ReactDOM from &apos;react-dom&apos;; function ListItem(props) { return <li>{props.value}</li>; } function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) =&gt; ); return ( <h2>React Map Example</h2> <ul> {listItems} </ul> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getElementById(&apos;app&apos;) ); export default App; 

Çıktı