Kryssrutor och villkorsstyrd rendering i React

Låt oss göra så att beroende på om en kryssruta är markerad eller inte, visas antingen en bit kod på skärmen eller en annan. Vi använder villkorsstyrd rendering för detta:

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

En kryssruta är given. Använd kryssrutan för att fråga användaren om hen redan är 18 år gammal. Om kryssrutan är markerad, visa följande kodblock för användaren:

<div>
	<h2>Hurra, du är redan 18 år</h2>
	<p>
		här finns innehåll endast för vuxna
	</p>
</div>

Och om kryssrutan inte är markerad - visa följande:

<div>
	<p>
		tyvärr, du är inte 18 år än:(
	</p>
</div>

En kryssruta och ett stycke är givna. Om kryssrutan är markerad, låt stycket vara synligt på skärmen, och om den inte är markerad - dölj det.