3. Latihan

Latiha ini bertujuan agar kita lebih memahami konsep dari state dan props.

Pertama copy paste kode di bawah ke app/page.tsx

app/page.tsx

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

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

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

const Home = () => {
  let [tanggal, setTanggal] = useState(0);
  let [bulan, setBulan] = useState("Agustus");

  return (
    <main className="space-y-5">
      <h1>Latihan</h1>
      <Card
        bulan={bulan}
        tanggal={tanggal}
        setTanggal={setTanggal}
        setBulan={setBulan}
      />
      <Button
        onClick={() => {
          setTanggal((c) => c + 1);
        }}
        colorSchema="blue"
        title="tambah"
      />
      <Button
        onClick={() => {
          setTanggal((c) => c - 1);
        }}
        colorSchema="red"
        title="kurang"
      />
      <InputText
        id="bulan"
        name={"bulan"}
        value={bulan}
        onChange={(e) => {
          setBulan(e.target.value);
        }}
      />
    </main>
  );
};

export default Home;

Tugas

1. Buatlah komponen Card yang menerima state tanggal dan bulan.
2. Jika kode tersebut dijalankan maka harus mendapatkan tampilan seperti di bawah.
3. Jika button tambah di klik, maka angka akan bertambah
4. Jika button kurang di klik, maka angka akan berkurang
5. Jika input berubah, maka nama bulan akan berubah
6. Jika button clear di klik maka tampilan akan kembali seperti awal, tanggal 0 dan bulan Agustus