Чэкбоксы і ўмоўны рэндарынг у React

Давайце зробім так, каб у залежнасці ад адзнакі чэкбокса, на экран вывадзіўся альбо адзін кавалак кода, альбо іншы. Выкарастаем для гэтага ўмоўны рэндарынг:

function App() {
	const [checked, setChecked] = useState(true);
	
	let message;
	if (checked) {
		message = <p>паведамленне 1</p>;
	} else {
		message = <p>паведамленне 2</p>;
	}
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<div>{message}</div>
	</div>;
}

Дадзены чэкбокс. З дапамогай чэкбокса спытайце ў карыстальніка, калі лі яму ўжо 18 гадоў. Калі чэкбокс адзначаны, пакажыце карыстальніку наступны блок кода:

<div>
	<h2>Ура, вам ужо ёсць 18</h2>
	<p>
		тут размешчаны кантэнт толькі для дарослых
	</p>
</div>

А калі чэкбокс не адзначаны - то наступны:

<div>
	<p>
		нажаль, вам яшчэ няма 18 гадоў:(
	</p>
</div>

Дадзены чэкбокс і абзац. Калі чэкбокс адзначаны, хай абзац будзе бачным на экране, а калі не адзначаны - схавайце яго.