Čekboksovi i uslovno renderovanje u React-u

Hajde da napravimo tako da, u zavisnosti od toga da li je čekboks označen, na ekranu bude prikazan ili jedan deo koda ili drugi. Koristićemo uslovno renderovanje:

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

Dat je čekboks. Pomoću čekboksa pitajte korisnika da li već ima 18 godina. Ako je čekboks označen, prikažite korisniku sledeći blok koda:

<div>
	<h2>Ura, već vam ima 18</h2>
	<p>
		ovde se nalazi sadržaj samo za odrasle
	</p>
</div>

A ako čekboks nije označen - onda sledeći:

<div>
	<p>
		avaj, još vam nema 18 godina:(
	</p>
</div>

Dat je čekboks i paragraf. Ako je čekboks označen, neka paragraf bude vidljiv na ekranu, a ako nije označen - sakrijte ga.