Casetă de bifat și randare condiționată în React

Haideți să facem astfel încât, în funcție de bifarea casetei de bifat, să fie afișat pe ecran fie un fragment de cod, fie altul. Vom folosi pentru aceasta randarea condiționată:

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

Este dată o casetă de bifat. Cu ajutorul casetei de bifat întrebați utilizatorul dacă are deja 18 ani. Dacă caseta este bifată, afișați utilizatorului următorul bloc de cod:

<div>
	<h2>Ura, aveți deja 18 ani</h2>
	<p>
		aici este plasat conținut doar pentru adulți
	</p>
</div>

Iar dacă caseta de bifat nu este bifată - atunci următorul:

<div>
	<p>
		din păcate, încă nu aveți 18 ani:(
	</p>
</div>

Este dată o casetă de bifat și un paragraf. Dacă caseta de bifat este bifată, lăsați paragraful să fie vizibil pe ecran, iar dacă nu este bifată - ascundeți-l.