Checkboxy i renderowanie warunkowe w React

Zróbmy tak, aby w zależności od zaznaczenia checkboxa, na ekranie wyświetlał się albo jeden fragment kodu, albo inny. Użyjmy do tego renderowania warunkowego:

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

Dany jest checkbox. Za pomocą checkboxa zapytaj użytkownika, czy ma już 18 lat. Jeśli checkbox jest zaznaczony, pokaż użytkownikowi następujący blok kodu:

<div>
	<h2>Hura, masz już 18 lat</h2>
	<p>
		tutaj znajduje się treść tylko dla dorosłych
	</p>
</div>

A jeśli checkbox nie jest zaznaczony - to następujący:

<div>
	<p>
		niestety, nie masz jeszcze 18 lat:(
	</p>
</div>

Dany jest checkbox i akapit. Jeśli checkbox jest zaznaczony, niech akapit będzie widoczny na ekranie, a jeśli nie jest zaznaczony - ukryj go.