React / Materi 3 dari 3

useEffect dan Render List

Efek samping dan menampilkan daftar.

useEffect menjalankan kode setelah render, misalnya mengambil data. Saat merender list, beri atribut key yang unik.

jsx

import { useEffect, useState } from "react";

export default function Daftar() {
  const [items, setItems] = useState([]);
  useEffect(() => {
    setItems([{ id: 1, nama: "HTML" }, { id: 2, nama: "CSS" }]);
  }, []);
  return <ul>{items.map((i) => <li key={i.id}>{i.nama}</li>)}</ul>;
}