1. List Rendering

List rendering merupakan bagaimana cara react merender data dari sebuah array menjadi list pada JSX.

Pada contoh state, kita sudah mengimplementasikan list rendering pada kode

1. List Rendering

app/page.tsx

  {hasil.map((n, index) => (
    <section key={index}>
        <h5>Nama Mata pelajaran : {n.mata_pelajaran} </h5>
        <h5>Nilai : {n.nilai} </h5>
    </section>
    ))}

Dalam membuat list rendering pada JSX harus memperhatikan hal-hal berikut.

• Menggunakan method map pada array.
• return dari method map merupakan JSX dan memiliki element parent.
• Pada element parent diberikan props key dengan value harus unique, biasanya menggunakan id dari item atau index dari array.

2. Conditional List Rendering

Pada contoh ini kita membuat kondisi jika jumlah item pada array adalah 0 , maaka akan ditampikan pesan Data Tidak Ditemukan

app/page.tsx

  "use client"; // gunakan use client karena ada onChange pda komponen
import { useState } from "react";
import Button from "./component/Button";

type Hasil = {
  mata_pelajaran: string;
  nilai: number | null;
};

const Home = () => {

  let [hasil, setHasil] = useState<Hasil[]>([]); // jika sebuah array

  return (
    <main className="space-y-5">
      <h1>Hello World</h1>
      <p>message addalah {message}</p>{" "}
      <div>
        <h2>Daftar Nilai</h2>
        {hasil.length === 0 ? (
          <p className="text-red-500">Data tidak ditemukan</p>
        ) : (
          hasil.map((n, index) => (
            <section key={index}>
              <h5>Nama Mata pelajaran : {n.mata_pelajaran} </h5>
              <h5>Nilai : {n.nilai} </h5>
            </section>
          ))
        )}
      </div>
    </main>
  );
};

export default Home;

hasil.length === 0

hasil memiliki data

Warning

Conditional List Rendering memilki banyak varian, kuncinya adalah kita memahami logic conditonal IF ELSE ELSE IF di javascript