Jelölőnégyzetek és feltételes renderelés Reactban

Tegyük úgy, hogy a jelölőnégyzet állapotától függően vagy az egyik kódrészlet, vagy a másik jelenjen meg a képernyőn. Ehhez használjunk feltételes renderelést:

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

Adott egy jelölőnégyzet. A jelölőnégyzettel kérdezd meg a felhasználót, hogy elmúlt-e már 18 éves. Ha a jelölőnégyzet be van jelölve, mutasd meg a felhasználónak a következő kódrészletet:

<div>
	<h2>Hurrá, elmúltál 18 éves</h2>
	<p>
		itt csak felnőttek számára szóló tartalom található
	</p>
</div>

Ha viszont a jelölőnégyzet nincs bejelölve - akkor pedig a következőt:

<div>
	<p>
		sajnos még nem múltál el 18 éves:(
	</p>
</div>

Adott egy jelölőnégyzet és egy bekezdés. Ha a jelölőnégyzet be van jelölve, a bekezdés legyen látható a képernyőn, ha pedig nincs bejelölve - rejtsd el.