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 :

function 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>;
}

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 :

<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 :

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

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.