Чекбоксҳо ва рендеринг шартӣ дар 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

Чекбокс ва абзас дода шудаанд. Агар чекбокс аломат зада шуда бошад, бигзор абзас дар экран намоён бошад, ва агар аломат нашуда бошад - онро пинҳон кунед.