Skip to content

1. State Fundamental

State adalah data yang dimiliki oleh sebuah komponen yang berasal dari komponen itu sendiri dan data dalam state boleh berubah. useState digunakan untuk membuat state pada function component.

Pada React Component ketika nilai state berubah maka komponen akan dirender ulang dan user interface pada browser akan berubah sesuai dengan perubahan nilai dari state itu sendiri.

Berikut format penulisan state pada React Component

format penulisam
const [nameState, setterState] = React.useState(initialValue)

Keterangan

  • const/let adalah keyword pendeklarasi state.
  • nameState adalah nama dari state.
  • setterState adalah nama function yang akan digunakan untuk mengubah nilai state.
  • initialValue adalah nilai awal dari state.

Perhatian

Pada NextJS 13 di folder app ketika menggunakan state harus menggunakan menjadikan komponen sebagai client component dengan tanda use client pada awal baris kode. Pembahasan selengkapnya pada materi nextjs fundamental.

1. Membuat State pada Component

Berikut beberapa contoh pembuatan state pada React Component dengan beberapa tipe data.

app/page.ts
"use client"; // gunakan use client karena ada onChange pda komponen
import { useState } from "react";

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

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

const Home = () => {
  let [message, setMessage] = useState("hai"); // jika string, dengan data awal "hai"
  let [count, setCount] = useState(0); // jika number , dengan data awal 0
  let [isLogin, setIsLogin] = useState(false); // jika booelan, dengan data awal false
  let [profile, setProfile] = useState<Identitas>({
    // jika sebuah object
    nama: "",
    sekolah: "",
    umur: null,
  });

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

  return (
    <main className="space-y-5">
      <h1>Hello World</h1>
    </main>
  );
};

export default Home;

2. Render State pada JSX

untuk merender state pada JSX cara sama dengan kita merender props maupun variabel biasa di JavaScript yaitu dengan {nama_state}

app/page.ts
"use client"; // gunakan use client karena ada onChange pda komponen
import { useState } from "react";

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

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

const Home = () => {
  let [message, setMessage] = useState("hai"); // jika string, dengan data awal "hai"
  let [count, setCount] = useState(0); // jika number , dengan data awal 0
  let [isLogin, setIsLogin] = useState(false); // jika booelan, dengan data awal false
  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>

      <p>message addalah {message}</p>

      <p>Count adalah {count}</p>

      <p> {isLogin ? "Sudah Login" : "Belum Login"}</p>

      <div className="flex flex-col">
        <h5>Nama : {profile.nama}</h5>
        <h5>Sekolah : {profile.sekolah}</h5>
        <h5>Umur : {profile.umur}</h5>
      </div>

      <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>
    </main>
  );
};

export default Home;

Pada kode di atas adalah contoh bagaimana state di render pada komponen, baik itu string, number, boolean, object maupun array.

Note

List Rendering pada ssat merender Array pada JSX akan dibahas pada materi selanjutnya.

Jalankan pada Browser

Alt text

2. Function Updater

Function Updater merupakan suatu function untuk merubah value dari state. Merubah value dengan function updater merupakan cara yang paling aman dan best practice. Function Update biasanya diberikan nama setNamaState, seperti pada contoh let [message, setMessage] = useState("hai") maka setMessage merupakan function Updater dari state message.

Berikut contoh pengunaan Function Updater pada komponen.

app/page.tsx
...

  return (
    <main className="space-y-5">
      <h1>Hello World</h1>
      <p>message addalah {message}</p>{" "}
      <Button
        title="Hello"
        variant="solid"
        colorSchema="blue"
        onClick={() => {
          setMessage("Hello");
        }}
      />
      <Button
        title="Salam"
        variant="outline"
        colorSchema="blue"
        onClick={() => {
          setMessage("Assalamualaikum");
        }}
      />
      <p>Count adalah {count}</p>
      <Button
        title="Tambah"
        variant="solid"
        colorSchema="blue"
        onClick={() => {
          setCount((prevCount) => prevCount + 1);
        }}
      />
      <Button
        title="Kurang"
        isDisabled={count < 1}
        variant="solid"
        colorSchema="red"
        onClick={() => {
          setCount((prevCount) => prevCount - 1);
        }}
      />
      <p> {isLogin ? "Sudah Login" : "Belum Login"}</p>
      <Button
        title="Login"
        isDisabled={isLogin === true}
        variant="solid"
        colorSchema="blue"
        onClick={() => {
          setIsLogin(true);
        }}
      />
      <Button
        title="Logout"
        isDisabled={isLogin === false}
        variant="solid"
        colorSchema="red"
        onClick={() => {
          setIsLogin(false);
        }}
      />
      <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>
        ))}

        <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];
            });
          }}
        />
      </div>
    </main>
  );
};

export default Home;

Pengujian pada Postman

Alt text

Cara Penggunaan function updater tidak hanya seperti contoh di atas, sering dengen perkembangan materi kita akan mempelajari cara-cara yang lainnya.