2. State sebagai Props

Pada dasarnya state adalah data yang dimiliki oleh sebuah komponen dan dikelola oleh komponen itu sendiri. Namun kita dapat mengirimkan state dan function updater ke komponen lain melalui sebuah props. Kita dapat mengirimkan statesaja, function updatersaja, atau keduanya.

1. Buat Komponen BelajarState

Pada contoh ini, kita buat terlebih dahulu Komponen BelajarState, dimana komponen ini akan meneriman props dari komponen parent. Props yang dikirimkan oleh parent adalah state dan function updater yang ada pada komponen parent

app/module.belajarState.tsx

import Button from "../component/Button";
import { Dispatch, SetStateAction } from "react";
import { Hasil, Identitas } from "../page";

interface BelajarStateProps {
  hasil: Hasil[];
  setHasil: Dispatch<SetStateAction<Hasil[]>>;
  profile: Identitas;
  setProfile: Dispatch<SetStateAction<Identitas>>;
}

const BelajarState: React.FC<BelajarStateProps> = ({
  hasil,
  setHasil,
  profile,
  setProfile,
}) => {
  return (
    <section>
      <h1>Belajar Event</h1>
      <div className="flex flex-col">
        <h5>Nama : {profile.nama}</h5>
        <h5>Sekolah : {profile.sekolah}</h5>
        <h5>Umur : {profile.umur}</h5>
      </div>

      <Button
        title="Ubah Nama"
        variant="solid"
        colorSchema="blue"
        onClick={() => {
          setProfile((prevProfile) => {
            return {
              ...prevProfile,
              nama: "Ilham Maulana Fikri",
            };
          });
        }}
      />
      <Button
        title="Update"
        variant="solid"
        colorSchema="blue"
        onClick={() => {
          setProfile((prevProfile) => {
            return {
              ...prevProfile,
              sekolah: "SMP MADINATULQURAN",
            };
          });
        }}
      />

      <div>
        <h2>Daftar Nilai</h2>
        {hasil.map((n, index) => (
          <section key={index}>
            <h5>Nama Mata pelajaran : {n.mata_pelajaran} </h5>
            <h5>Nilai : {n.nilai} </h5>
          </section>
        ))}
      </div>
      <Button
          title="Tambah"
          variant="solid"
          colorSchema="blue"
          onClick={() => {
            setHasil((prevHasil) => {
              return [
                ...prevHasil,
                {
                  mata_pelajaran: "B. Indonesia",
                  nilai: 100,
                },
              ];
            });
          }}
        />
        <Button
          title="Kurang"
          isDisabled={hasil.length <= 1}
          variant="solid"
          colorSchema="red"
          onClick={() => {
            setHasil((prevHasil) => {
              prevHasil.pop();
              return [...prevHasil];
            });
          }}
        />
    </section>
  );
};

export default BelajarState;

Kode interface BelajarStateProps merupakan deklarasi dari tipe data sebuah state. Sebuah function updater didefinisikan dengan Dispatch<SetStateAction<Hasil[]>>;, dimana Hasil[] tergantung dari state-nya.

2. Panggil Komponen BelajarState

app/page.tsx

"use client"; // gunakan use client karena ada onChange pda komponen
import { useState } from "react";
import BelajarState from "./module/belajarState";

export type Identitas = {
  nama: string;
  sekolah: string;
  umur: number | null;
};

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

const Home = () => {
  let [profile, setProfile] = useState<Identitas>({
    // jika sebuah object
    nama: "Ilham Jaya kusuma",
    sekolah: "SMK MADINATULQURAN",
    umur: 17,
  });

  let [hasil, setHasil] = useState<Hasil[]>([
    {
      mata_pelajaran: "matematika",
      nilai: 80,
    },
    {
      mata_pelajaran: "fisika",
      nilai: 90,
    },
    {
      mata_pelajaran: "kimia",
      nilai: 95,
    },
  ]); // jika sebuah array

  return (
    <main className="space-y-5">
      <h1>Hello World</h1>
      <BelajarState hasil={hasil} setHasil={setHasil} profile={profile} setProfile={setProfile} />
    </main>
  );
};

export default Home;

3. Jalankan pada Browser