Чекбокси и условен рендеринг в 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

Даден е чекбокс и абзац. Ако чекбоксът е отметнат, нека абзацът бъде видим на екрана, а ако не е отметнат - скрийте го.