Cases à cocher et rendu conditionnel dans React

Faisons en sorte qu'en fonction de la case cochée, un extrait de code soit affiché à l'écran, ou un autre. Utilisons pour cela le rendu conditionnel :

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

Задание 1

Une case à cocher est donnée. À l'aide de la case à cocher, demandez à l'utilisateur s'il a déjà 18 ans. Si la case est cochée, montrez à l'utilisateur le bloc de code suivant :

jsx<div>
  <h2>Hourra, vous avez déjà 18 ans</h2>
  <p>
    ici se trouve le contenu réservé aux adultes
  </p>
</div>

Et si la case n'est pas cochée - alors le suivant :

jsx<div>
  <p>
    hélas, vous n'avez pas encore 18 ans :(
  </p>
</div>

Задание 2

Une case à cocher et un paragraphe sont donnés. Si la case est cochée, laissez le paragraphe être visible à l'écran, et si elle n'est pas cochée - masquez-le.