Terjemahan ke Bahasa Indonesia

Halo sana, para pengembang React masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia ReactJS, khususnya fokus pada fungsi map yang kuat. Sebagai guru ilmu komputer tetangga Anda, saya di sini untuk mengarahkan Anda melalui konsep ini dengan penjelasan yang jelas, banyak contoh, dan mungkin saja sedikit lagu-lagu bersama. Jadi, ambil minuman favorit Anda, duduk nyaman, dan mari kita masuk ke dalam!

Apa Itu Map di ReactJS?

Sebelum kita melompat ke penggunaan map khusus di React, mari kita mulai dari dasar. Dalam JavaScript (yang React dibangun di atasnya), map adalah metode array yang memungkinkan kita untuk transformasi setiap elemen array sesuai dengan fungsi yang diberikan. Itu seperti memiliki tongkat ajaib yang dapat mengubah setiap item di daftar Anda menjadi sesuatu yang baru!

Sintaks

Ini adalah sintaks umum dari fungsi map:

array.map((currentValue, index, array) => {
  // Return the transformed element
});

Jangan khawatir jika ini terlihat sedikit menakutkan pada awalnya. Kita akan membongkar ini langkah demi langkah, dan segera Anda akan menjadi ahli dalam pemetaan!

Mengapa Menggunakan Map di React?

Dalam React, kita seringkali perlu merender daftar elemen, seperti daftar item todo, galeri gambar, atau tabel data. Itu di mana map berlimpah! Itu memungkinkan kita untuk secara efisien mengubah array data menjadi array elemen JSX yang React dapat merender.

Map Pertama Anda di React

Mari kita mulai dengan contoh sederhana. Bayangkan kita memiliki array nama buah, dan kita ingin menampilkan mereka sebagai daftar di komponen React kita.

import React from 'react';

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

  return (
    <div>
      <h2>Daftar Buah Saya</h2>
      <ul>
        {fruits.map((fruit) => (
          <li>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

mari kitauraikan ini:

1. Kita memiliki array nama buah yang disimpan di variabel fruits.
2. Di dalam JSX kita, kita gunakan kurung kurawal {} untuk menanamkan ekspresi JavaScript.
3. Kita panggil fruits.map(), yang akan iterasi atas setiap buah di array.
4. Untuk setiap buah, kita mengembalikan elemen <li> yang mengandung nama buah.

Ketika React merender komponen ini, Anda akan melihat daftar buah yang diatur rapih di halaman Anda. Magic, kan?

Menambahkan Kunci ke Elemen Daftar

Sekarang, jika Anda mencoba menjalankan contoh sebelumnya, Anda mungkin telah melihat peringatan di konsol tentang kunci. Kunci adalah atribut khusus yang membantu React mengidentifikasi item mana yang telah berubah, ditambahkan, atau dihapus dalam daftar. Mari kita perbarui contoh kita untuk menyertakan kunci:

import React from 'react';

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

  return (
    <div>
      <h2>Daftar Buah Saya</h2>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

Dalam versi ini, kita menggunakan index dari setiap buah sebagai kunci. Meskipun penggunaan index sebagai kunci biasanya tidak direkomendasikan untuk daftar dinamis, itu baik untuk daftar statis seperti ini.

Mempetakan Over Objek

Biasanya, Anda akan bekerja dengan array objek daripada string sederhana. Mari kita lihat bagaimana kita dapat menangani ini:

import React from 'react';

function FruitList() {
  const fruits = [
    { id: 1, name: 'Apple', color: 'Red' },
    { id: 2, name: 'Banana', color: 'Yellow' },
    { id: 3, name: 'Cherry', color: 'Red' },
    { id: 4, name: 'Date', color: 'Brown' },
  ];

  return (
    <div>
      <h2>Daftar Buah Saya</h2>
      <ul>
        {fruits.map((fruit) => (
          <li key={fruit.id}>
            {fruit.name} - {fruit.color}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

Dalam contoh ini, kita memetakan atas array objek buah. Setiap objek memiliki id, name, dan color. Kita menggunakan id sebagai kunci (yang jauh lebih baik daripada menggunakan index), dan kita menampilkan nama dan warna setiap buah.

Menggunakan Map untuk Membuat Komponen Khusus

Sekarang, saat keterampilan React Anda tumbuh, Anda akan sering membuat komponen khusus untuk item daftar. Mari kita lihat bagaimana kita dapat menggunakan map dengan komponen FruitItem khusus:

import React from 'react';

function FruitItem({ name, color }) {
  return (
    <li style={{ color: color }}>
      {name}
    </li>
  );
}

function FruitList() {
  const fruits = [
    { id: 1, name: 'Apple', color: 'red' },
    { id: 2, name: 'Banana', color: 'yellow' },
    { id: 3, name: 'Cherry', color: 'red' },
    { id: 4, name: 'Date', color: 'brown' },
  ];

  return (
    <div>
      <h2>Daftar Buah Warna Saya</h2>
      <ul>
        {fruits.map((fruit) => (
          <FruitItem
            key={fruit.id}
            name={fruit.name}
            color={fruit.color}
          />
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

Dalam contoh ini, kita membuat komponen FruitItem yang menerima name dan color sebagai prop. Kita kemudian menggunakan map untuk membuat FruitItem untuk setiap buah di array. Pendekatan ini membuat kode kita lebih modular dan mudah diawasi.

Teknik Map Tingkat Lanjut

Menyaring Sementara Mempetakan

kadang-kadang, Anda mungkin ingin menyaring daftar saat memetakan. Anda dapat melakukan ini dengan menggabungkan map dan filter:

import React from 'react';

function RedFruitList() {
  const fruits = [
    { id: 1, name: 'Apple', color: 'red' },
    { id: 2, name: 'Banana', color: 'yellow' },
    { id: 3, name: 'Cherry', color: 'red' },
    { id: 4, name: 'Date', color: 'brown' },
  ];

  return (
    <div>
      <h2>Daftar Buah Merah Saya</h2>
      <ul>
        {fruits
          .filter(fruit => fruit.color === 'red')
          .map(fruit => (
            <li key={fruit.id}>{fruit.name}</li>
          ))
        }
      </ul>
    </div>
  );
}

export default RedFruitList;

Contoh ini pertama-tama menyaring buah-buahan menjadi yang merah, kemudian memetakan atas buah-buahan yang disaring untuk membuat item daftar.

Mempetakan Bersarang

kadang-kadang, Anda mungkin perlu bekerja dengan array bersarang. Mari kita lihat contoh:

import React from 'react';

function FruitCategories() {
  const fruitCategories = [
    { category: 'Citrus', fruits: ['Orange', 'Lemon', 'Lime'] },
    { category: 'Berries', fruits: ['Strawberry', 'Blueberry', 'Raspberry'] },
    { category: 'Tropical', fruits: ['Mango', 'Pineapple', 'Coconut'] },
  ];

  return (
    <div>
      <h2>Kategori Buah</h2>
      {fruitCategories.map((category, index) => (
        <div key={index}>
          <h3>{category.category}</h3>
          <ul>
            {category.fruits.map((fruit, fruitIndex) => (
              <li key={fruitIndex}>{fruit}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

export default FruitCategories;

Dalam contoh ini, kita memetakan atas array fruitCategories, dan untuk setiap kategori, kita memetakan atas array fruits nya. Ini menciptakan struktur daftar bersarang.

Metode Map Umum di React

Berikut adalah tabel yang menggabungkan beberapa metode map umum yang Anda mungkin gunakan di React:

Metode	Deskripsi	Contoh
map	Transformasi setiap elemen array	array.map(item => <li>{item}</li>)
filter	Membuat array baru dengan elemen yang lolos ujian	array.filter(item => item.length > 3)
reduce	Mengurangi array menjadi nilai tunggal	array.reduce((acc, item) => acc + item, 0)
forEach	Menjalankan fungsi untuk setiap elemen array	array.forEach(item => console.log(item))
find	Mengembalikan elemen pertama yang lolos ujian	array.find(item => item.id === 3)
some	Mengecek jika ada elemen yang lolos ujian	array.some(item => item > 10)
every	Mengecek jika semua elemen lolos ujian	array.every(item => item.length > 0)

Ingat, meskipun map sangat berguna, metode lain ini juga dapat menjadi alat kuat di dalam kait React Anda!

Kesimpulan

Dan begitu, orang-orang! Kita telah melakukan perjalanan melalui negeri map di React, dari penggunaan dasar hingga teknik yang lebih tingkat lanjut. Ingat, map adalah seperti pisau Swiss Army Anda dalam pengembangan React – itu multifungsi, kuat, dan Anda akan seringkali mencarinya saat Anda memerlukan itu.

Buat terus latihan dengan map. Cobalah membuat jenis daftar yang berbeda, eksperimen dengan struktur data yang lebih kompleks, dan lihat bagaimana Anda dapat menggabungkan map dengan metode array lainnya untuk menciptakan antarmuka pengguna dinamis dan interaktif.

Selamat coding, dan may your arrays always map true!

Credits: Image by storyset