Boss Battle: Toggle Show/Hide

เป้าหมายของ Mission นี้: สร้าง Toggle Show/Hide ด้วย useState

ใช้ state แบบ boolean

ใช้ state แบบ true/false แทนตัวเลข — เงื่อนไข {condition && <div>...} จะแสดง <div> แค่ ตอน condition เป็น true เท่านั้น

stateDiagram-v2
    [*] --> Hidden
    Hidden --> Visible: คลิกปุ่ม (setShow(!show))
    Visible --> Hidden: คลิกปุ่มอีกครั้ง
    Hidden: ซ่อน
    Visible: โชว์

"use client";
import { useState } from "react";

export function ToggleBox() {
  const [show, setShow] = useState(false);

  return (
    <div>
      <button onClick={() => setShow(!show)}>{show ? "ซ่อน" : "โชว์"}</button>
      {show && <p>ข้อความลับ! 🎉</p>}
    </div>
  );
}

สังเกต: setShow(!show) คือ "สลับค่าตรงข้าม" — ถ้า show เป็น true จะเปลี่ยนเป็น false และกลับกัน เขียนสั้นกว่าเช็คเงื่อนไขเอง

ลองทำเองแล้ววางไว้ในหน้าไหนก็ได้ที่ทดสอบง่ายๆ — Chapter นี้จบแล้ว ไปเรียน Forms กันต่อ