Reactда чекбокслар ва шартли рендеринг

Келинг, чекбокс белгиланганлигига қараб, экранга бир хил бўлмаган кодни чиқаришни таъминлайми. Бунинг учун шартли рендерингдан фойдаланамиз:

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

Задание 1

Чекбокс берилган. Чекбокс ёрдамида фойдаланувчидан сўранг, унга 18 ёш бормию. Агар чекбокс белгиланган бўлса, фойдаланувчига куйидаги код блокини кўрсатинг:

jsx<div>
  <h2>Ұрра, сизга 18 ёш бўлган</h2>
  <p>
    бу ерда факат катталар учунгина контент жойлашган
  </p>
</div>

Агар чекбокс белгиланмаган бўлса - куйидагини:

jsx<div>
  <p>
    афсуски, сизга ҳали 18 ёш бўлмаган:(
  </p>
</div>

Задание 2

Чекбокс ва абзац берилган. Агар чекбокс белгиланган бўлса, абзац экранда кўринувчи бўлсин, агар белгиланмаган бўлса - уни яширинг.