Checkbox dan Rendering Bersyarat di React

Mari kita buat agar tergantung pada penandaan checkbox, baik satu potongan kode atau potongan kode lainnya yang ditampilkan di layar. Kita akan menggunakan rendering bersyarat untuk ini:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  let message;
  if (checked) {
    message = <p>pesan 1</p>;
  } else {
    message = <p>pesan 2</p>;
  }
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
    <div>{message}</div>
  </div>;
}

Задание 1

Diberikan sebuah checkbox. Gunakan checkbox untuk bertanya kepada pengguna, apakah dia sudah berusia 18 tahun. Jika checkbox ditandai, tampilkan blok kode berikut kepada pengguna:

jsx<div>
  <h2>Hore, kamu sudah berusia 18 tahun</h2>
  <p>
    di sini terdapat konten hanya untuk dewasa
  </p>
</div>

Dan jika checkbox tidak ditandai - tampilkan yang berikut ini:

jsx<div>
  <p>
    sayangnya, kamu belum berusia 18 tahun:(
  </p>
</div>

Задание 2

Diberikan sebuah checkbox dan sebuah paragraf. Jika checkbox ditandai, buat paragraf tersebut terlihat di layar, dan jika tidak ditandai - sembunyikan paragraf tersebut.