Checkboxes en conditioneel renderen in React

Laten we ervoor zorgen dat, afhankelijk van de aanduiding van de checkbox, ofwel het ene stukje code op het scherm wordt weergegeven, ofwel het andere. Laten we hiervoor conditioneel renderen gebruiken:

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

Gegeven een checkbox. Gebruik de checkbox om de gebruiker te vragen of hij/zij al 18 jaar is. Als de checkbox is aangevinkt, toon de gebruiker volgende codeblok:

<div>
	<h2>Hoera, je bent al 18</h2>
	<p>
		hier staat inhoud alleen voor volwassenen
	</p>
</div>

En als de checkbox niet is aangevinkt - dan de volgende:

<div>
	<p>
		helaas, je bent nog geen 18 jaar:(
	</p>
</div>

Gegeven een checkbox en een alinea. Als de checkbox is aangevinkt, laat de alinea dan zichtbaar zijn op het scherm, en als deze niet is aangevinkt - verberg deze dan.