Casillas de verificación y renderizado condicional en React

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

Задание 1

Se da una casilla de verificación. Usando la casilla de verificación, pregunte al usuario si ya tiene 18 años. Si la casilla de verificación está marcada, muestre al usuario el siguiente bloque de código:

jsx<div>
  <h2>¡Hurra, ya tienes 18 años!</h2>
  <p>
    aquí se encuentra el contenido solo para adultos
  </p>
</div>

Y si la casilla de verificación no está marcada, muestre el siguiente:

jsx<div>
  <p>
    desafortunadamente, aún no tienes 18 años:(
  </p>
</div>

Задание 2

Se dan una casilla de verificación y un párrafo. Si la casilla de verificación está marcada, haga que el párrafo sea visible en la pantalla, y si no está marcada, ocúltelo.