Dalam reaksi, metode peta digunakan untuk melintasi dan menampilkan daftar objek serupa dari komponen; metode peta tidak unik untuk bereaksi dan dapat memanggil fungsi JavaScript standar pada array apa pun. Metode peta memanggil fungsi yang disediakan pada setiap elemen array pemanggil.
Lingkungan operasi tutorial ini: Sistem Windows 10, reaksi versi 17.0.1, komputer Dell G3.
Peta merupakan salah satu jenis pengumpulan data yang datanya disimpan dalam bentuk berpasangan. Ini berisi kunci unik dimana nilai yang disimpan di peta harus dipetakan. Kami tidak dapat menyimpan pasangan duplikat di map(), hal ini karena setiap kunci yang disimpan bersifat unik dan terutama digunakan untuk pencarian dan penemuan data dengan cepat.
Di React, metode map digunakan untuk mengulangi dan menampilkan daftar objek serupa dalam sebuah komponen. map tidak spesifik untuk React. Sebaliknya, ini adalah fungsi JavaScript standar yang dapat dipanggil pada array apa pun. Metode map() membuat array baru dengan memanggil fungsi yang disediakan pada setiap elemen dalam array pemanggil.
contoh
Dalam contoh yang diberikan, fungsi map() menerima array angka dan menggandakan nilainya, kita menetapkan array baru yang dikembalikan oleh map() ke variabel doubleValue dan mencatatnya.
var angka = [1, 2, 3, 4, 5]; const doubleValue = angka.peta((angka)=>{ return (angka * 2); });Di React, metode map() digunakan untuk:
1. Lintasi elemen daftar.
contoh
impor React dari 'react'; impor ReactDOM dari 'react-dom'; function NameList(props) { const myLists = props.myLists; const listItems = myLists.map((myList) => <li>{myList</li > ); kembali ( <div> <h2>Contoh Peta Reaksi</h2> <ul>{listItems</ul> </div> } const myLists = ['A', 'B', 'C'); , 'D', 'D']; ReactDOM.render( <NameList myLists={myLists} />, document.getElementById('app') );2. Telusuri elemen daftar berdasarkan kunci.
contoh
impor React dari 'react'; impor ReactDOM dari 'react-dom'; function ListItem(props) { return <li>{props.value</li> } function NumberList(props) { angka const = props.numbers; const listItems = angka.peta((angka) => <ListItem key={number.toString()} nilai={number} /> ); kembali ( <div> <h2>Contoh Peta React</h2> <ul> {listItems} </ul> </div> ); } angka const = [1, 2, 3, 4, 5]; ReactDOM.render( <NumberList number={numbers} />, document.getElementById('app' ) );