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

Чекбокс жана абзац берилген. Эгерде чекбокс белгиленсе, абзац экранда көрүнүшү керек, ал эми эгерде белгиленбесе - аны жашырыңыз.