HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Daftar Bereaksi

❮ Sebelumnya Berikutnya ❯

Di React, Anda akan membuat daftar dengan beberapa jenis loop.

Metode larik JavaScript map()umumnya merupakan metode yang disukai.

Jika Anda membutuhkan penyegaran tentang map()metode ini, lihat bagian ES6 .

Contoh:

Mari kita render semua mobil dari garasi kita:

function Car(props) {
  return <li>I am a { props.brand }</li>;
}

function Garage() {
  const cars = ['Ford', 'BMW', 'Audi'];
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <ul>
        {cars.map((car) => <Car brand={car} />)}
      </ul>
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById('root'));

Ketika Anda menjalankan kode ini di create-react-app, itu akan berfungsi tetapi Anda akan menerima peringatan bahwa tidak ada "kunci" yang disediakan untuk item daftar.

w3schools CERTIFIED . 2022

Dapatkan Sertifikasi!

Selesaikan modul React, kerjakan latihannya, ikuti ujiannya, dan dapatkan sertifikasi w3schools!!

$95 DAFTAR

Kunci

Kunci memungkinkan Bereaksi untuk melacak elemen. Dengan cara ini, jika item diperbarui atau dihapus, hanya item tersebut yang akan dirender ulang, bukan seluruh daftar.

Kunci harus unik untuk setiap saudara. Tetapi mereka dapat diduplikasi secara global.

Umumnya, kunci harus berupa ID unik yang ditetapkan untuk setiap item. Sebagai upaya terakhir, Anda dapat menggunakan indeks array sebagai kunci.

Contoh:

Mari kita refactor contoh kita sebelumnya untuk memasukkan kunci:

function Car(props) {
  return <li>I am a { props.brand }</li>;
}

function Garage() {
  const cars = [
    {id: 1, brand: 'Ford'},
    {id: 2, brand: 'BMW'},
    {id: 3, brand: 'Audi'}
  ];
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <ul>
        {cars.map((car) => <Car key={car.id} brand={car.brand} />)}
      </ul>
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById('root'));

Uji Diri Anda Dengan Latihan

Olahraga:

Tambahkan atribut yang memungkinkan Bereaksi untuk melacak elemen dalam daftar.

function GroceryList() {
  const items = [
    {id: 1, name: 'bread'},
    {id: 2, name: 'milk'},
    {id: 3, name: 'eggs'}
  ];

  return (
    <>
      <h1>Grocery List</h1>
      <ul>
        {items.map((item) => <li ={item.id}>{item.name}</li>)}
      </ul>
    </>
  );
}

ReactDOM.render(<GroceryList />, document.getElementById('root'));

❮ Sebelumnya Berikutnya ❯