Checkbox dhe Renderimi i Kushtëzuar në React

Le të bëjmë që në varësi të shënuarjes së checkbox, në ekran të shfaqet ose një fragment kodi, ose një tjetër. Le të përdorim për këtë renderimin e kushtëzuar:

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

Është dhënë një checkbox. Me ndihmën e checkbox pyete përdoruesin, a ka ai tashmë 18 vjet. Nëse checkbox është shënuar, shfaq përdoruesit bllokun e mëposhtëm të kodit:

<div>
	<h2>Urime, ju keni mbi 18 vjet</h2>
	<p>
		këtu ndodhet përmbajtja vetëm për të rritur
	</p>
</div>

Por nëse checkbox nuk është shënuar - atëherë këtë:

<div>
	<p>
		nafak, ju nuk keni ende 18 vjet:(
	</p>
</div>

Janë dhënë një checkbox dhe një paragraf. Nëse checkbox është shënuar, le të jetë paragrafi i dukshëm në ekran, por nëse nuk është shënuar - fshihë atë.