Checkbox-lar və React-də şərti render etmə

Gəlin edək ki, checkbox qeyd olunmasından asılı olaraq, ekranda ya bir kod parçası, ya da digəri göstərilsin. Bunun üçün şərti render etmədən istifadə edək:

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

Задание 1

Bir checkbox verilib. Checkbox vasitəsilə istifadəçidən soruşun ki, onun 18 yaşı var ya yox? Əgər checkbox qeyd olunubsa, istifadəçiyə aşağıdakı kod blokunu göstərin:

jsx<div>
  <h2>Ura, sizin artıq 18 yaşınız var</h2>
  <p>
    burada yalnız böyüklər üçün olan kontent yerləşir
  </p>
</div>

Əgər checkbox qeyd olunmayıbsa - onda aşağıdakı bloku:

jsx<div>
  <p>
    təəssüf, sizin hələ 18 yaşınız yoxdur:(
  </p>
</div>

Задание 2

Bir checkbox və abzas verilib. Əgər checkbox qeyd olunubsa, abzas ekranda görünən olsun, əgər qeyd olunmayıbsa - onu gizlədin.