Afkrydsningsfelter og betinget rendering i React

Lad os gøre det sådan, at afhængigt af markeringen af afkrydsningsfeltet, vises enten den ene kodebid eller den anden på skærmen. Vi bruger betinget rendering til dette:

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

Givet et afkrydsningsfelt. Brug afkrydsningsfeltet til at spørge brugeren, om de allerede er 18 år gamle. Hvis afkrydsningsfeltet er markeret, skal du vise brugeren følgende kodeblok:

<div>
	<h2>Hurra, du er allerede 18 år</h2>
	<p>
		her er indholdet kun for voksne
	</p>
</div>

Og hvis afkrydsningsfeltet ikke er markeret - så følgende:

<div>
	<p>
		desværre, du er ikke 18 år endnu:(
	</p>
</div>

Givet et afkrydsningsfelt og et afsnit. Hvis afkrydsningsfeltet er markeret, lad afsnittet være synligt på skærmen, og hvis det ikke er markeret - skjul det.