Checkboxy i renderowanie warunkowe w React

Zróbmy tak, aby w zależności od zaznaczenia checkboxa, na ekranie wyświetlał się albo jeden fragment kodu, albo inny. Użyjmy do tego renderowania warunkowego:

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

Задание 1

Dany jest checkbox. Za pomocą checkboxa zapytaj użytkownika, czy ma już 18 lat. Jeśli checkbox jest zaznaczony, pokaż użytkownikowi następujący blok kodu:

jsx<div>
  <h2>Hura, masz już 18 lat</h2>
  <p>
    tutaj znajduje się treść tylko dla dorosłych
  </p>
</div>

A jeśli checkbox nie jest zaznaczony - to następujący:

jsx<div>
  <p>
    niestety, nie masz jeszcze 18 lat:(
  </p>
</div>

Задание 2

Dany jest checkbox i akapit. Jeśli checkbox jest zaznaczony, niech akapit będzie widoczny na ekranie, a jeśli nie jest zaznaczony - ukryj go.