Začiarkavacie políčka a podmienené vykresľovanie v Reacte

Urobme tak, aby v závislosti od začiarknutia políčka sa na obrazovku zobrazil buď jeden kúsok kódu, alebo druhý. Použime na to podmienené vykresľovanie:

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

Dané začiarkavacie políčko. Pomocou políčka sa spýtajte užívateľa, či má už 18 rokov. Ak je políčko začiarknuté, zobrazte užívateľovi nasledujúci blok kódu:

<div>
	<h2>Hurá, už máte 18</h2>
	<p>
		tu je umiestnený obsah len pre dospelých
	</p>
</div>

A ak nie je políčko začiarknuté - tak tento:

<div>
	<p>
		ach, ešte nemáte 18 rokov:(
	</p>
</div>

Dané začiarkavacie políčko a odstavec. Ak je políčko začiarknuté, nech je odstavec viditeľný na obrazovke, a ak nie je začiarknuté - skryte ho.