Avkrysningsbokser og betinget rendering i React

La oss gjøre det slik at avhengig av om avkrysningsboksen er merket eller ikke, vises enten en bit kode på skjermen eller en annen. Vi bruker betinget rendering for dette:

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

Det er gitt en avkrysningsboks. Bruk avkrysningsboksen til å spørre brukeren om hen allerede er 18 år gammel. Hvis avkrysningsboksen er merket, vis brukeren følgende kodeblokk:

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

Og hvis avkrysningsboksen ikke er merket - så følgende:

<div>
	<p>
		dessverre, du er ikke 18 år ennå:(
	</p>
</div>

Det er gitt en avkrysningsboks og et avsnitt. Hvis avkrysningsboksen er merket, la avsnittet være synlig på skjermen, og hvis den ikke er merket - skjul det.