RENDERING LIST REACT

Seringkali kita perlu menampilkan daftar data (list) di React. Kita bisa menggunakan fungsi map untuk mengiterasi array dan menghasilkan elemen React untuk setiap item dalam array tersebut. Berikut adalah contoh sederhana tentang cara melakukannya.

Menggunakan map untuk rendering list

import React from 'react';

const App = () => {
  const items = ['Apple', 'Banana', 'Cherry'];

  return (
    <div>
      <h1>Daftar Buah</h1>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};
export default App;

Pada contoh di atas, kita memiliki array items yang berisi nama-nama buah. Kita menggunakan fungsi map untuk mengiterasi setiap item dalam array dan menghasilkan elemen <li> untuk setiap buah.

Attribut key

Penting untuk memberikan atribut key yang unik pada setiap elemen yang dihasilkan untuk membantu React mengidentifikasi elemen mana yang telah berubah, ditambahkan, atau dihapus.

Pada kasus ini kita menggunakan index sebagai key. Index adalah nomor urut dari item dalam array yang tersedia untuk kita. Namun, jika data kita memiliki ID unik, lebih baik menggunakan ID tersebut sebagai key untuk menghindari masalah saat data berubah.

Menggunakan filter untuk menampilkan subset data

Kita juga bisa menggunakan fungsi filter untuk menampilkan subset (data yang sudah difilter) dari data yang ada. Misalnya, jika kita hanya ingin menampilkan buah yang namanya mengandung huruf ‘a’:

import React from 'react';

const App = () => {
  const items = ['Apple', 'Banana', 'Cherry'];

  return (
    <div>
      <h1>Daftar Buah</h1>
      <ul>
        {items.filter(item => item.includes('a')).map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};
export default App;