Checkboxes und bedingtes Rendering in React

Lassen Sie uns es so einrichten, dass je nach Markierung der Checkbox entweder ein Codeausschnitt oder ein anderer auf dem Bildschirm ausgegeben wird. Wir verwenden dafür bedingtes Rendering:

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

Задание 1

Gegeben ist eine Checkbox. Fragen Sie mithilfe der Checkbox den Benutzer, ob er bereits 18 Jahre alt ist. Wenn die Checkbox markiert ist, zeigen Sie dem Benutzer den folgenden Codeblock an:

jsx<div>
  <h2>Hurra, du bist bereits 18</h2>
  <p>
    hier befinden sich Inhalte nur für Erwachsene
  </p>
</div>

Und wenn die Checkbox nicht markiert ist - dann diesen:

jsx<div>
  <p>
    leider bist du noch nicht 18 Jahre alt:(
  </p>
</div>

Задание 2

Gegeben sind eine Checkbox und ein Absatz. Wenn die Checkbox markiert ist, soll der Absatz auf dem Bildschirm sichtbar sein, und wenn nicht markiert - verstecken Sie ihn.