Чэкбоксы і ўмоўны рэндарынг у 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

Дадзены чэкбокс і абзац. Калі чэкбокс адзначаны, хай абзац будзе бачным на экране, а калі не адзначаны - схавайце яго.