Kotak Semak dan Rendiran Bersyarat dalam React

Mari kita buat supaya bergantung pada tanda kotak semak, sama ada satu bahagian kod atau bahagian lain dipaparkan pada skrin. Kita akan gunakan rendiran bersyarat untuk ini:

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

Задание 1

Diberikan sebuah kotak semak. Dengan menggunakan kotak semak, tanya pengguna sama ada dia sudah berumur 18 tahun. Jika kotak semak ditanda, tunjukkan kepada pengguna blok kod berikut:

jsx<div>
  <h2>Hooray, anda sudah berumur 18 tahun</h2>
  <p>
    kandungan di sini hanya untuk dewasa
  </p>
</div>

Dan jika kotak semak tidak ditanda - maka yang berikut:

jsx<div>
  <p>
    malangnya, anda masih di bawah 18 tahun:(
  </p>
</div>

Задание 2

Diberikan sebuah kotak semak dan perenggan. Jika kotak semak ditanda, biarkan perenggan itu kelihatan pada skrin, dan jika tidak ditanda - sembunyikannya.