Checkboxit ja ehdollinen renderöinti Reactissa

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

Задание 1

Annettu checkbox. Kysy checkboxin avulla käyttäjältä, onko hänellä jo 18 vuotta. Jos checkbox on valittuna, näytä käyttäjälle seuraava koodilohko:

jsx<div>
  <h2>Huraa, sinulla on jo 18 vuotta</h2>
  <p>
    tässä on sisältöä vain aikuisille
  </p>
</div>

Ja jos checkboxia ei ole valittu - näytä seuraava:

jsx<div>
  <p>
    valitettavasti sinulla ei ole vielä 18 vuotta:(
  </p>
</div>

Задание 2

Annettu checkbox ja kappale. Jos checkbox on valittuna, anna kappaleen olla näkyvissä näytöllä, ja jos ei ole valittuna - piilota se.