React'ta Checkbox'lar ve Koşullu Render İşlemi

Checkbox'ın işaret durumuna bağlı olarak ekrana bir kod parçasının veya başka bir kod parçasının çıktılanmasını sağlayalım. Bunun için koşullu render işlemini kullanacağız:

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 verilmiştir. Checkbox'ı kullanarak kullanıcıya 18 yaşında olup olmadığını sorun. Eğer checkbox işaretliyse, kullanıcıya aşağıdaki kod bloğunu gösterin:

jsx<div>
  <h2>Yaşasın, 18 yaşındasınız</h2>
  <p>
    burada sadece yetişkinler için içerik bulunmaktadır
  </p>
</div>

Eğer checkbox işaretli değilse - aşağıdakini gösterin:

jsx<div>
  <p>
    ne yazık ki, henüz 18 yaşında değilsiniz:(
  </p>
</div>

Задание 2

Bir checkbox ve bir paragraf verilmiştir. Eğer checkbox işaretliyse, paragrafın ekranda görünür olmasını sağlayın, eğer işaretli değilse - onu gizleyin.