React-da Chekbokslar va shartli renderlash

Keling, chekboks belgilanganiga qarab, ekranga bir dona kod bo'lagi yoki boshqasi chiqarilishini ta'minlaylik. Buning uchun shartli renderlashdan foydalanamiz:

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

Задание 1

Chekboks berilgan. Chekboks yordamida foydalanuvchidan soring, uning yoshi 18 dan oshganmi. Agar chekboks belgilangan bo'lsa, foydalanuvchiga quyidagi kod blokini ko'rsating:

jsx<div>
  <h2>Xursandchilik, sizning yoshingiz 18 dan oshgan</h2>
  <p>
    bu yerda faqat kattalar uchun kontent joylashgan
  </p>
</div>

Agar chekboks belgilanmagan bo'lsa - quyidagini:

jsx<div>
  <p>
    afsus, sizning yoshingiz hali 18 ga yetmagan:(
  </p>
</div>

Задание 2

Chekboks va abzas berilgan. Agar chekboks belgilangan bo'lsa, abzas ekranda ko'rinadigan bo'lsin, agar belgilanmagan bo'lsa - uni yashiring.