Checkbox-lar və React-də şərti render etmə

Gəlin edək ki, checkbox qeyd olunmasından asılı olaraq, ekranda ya bir kod parçası, ya da digəri göstərilsin. Bunun üçün şərti render etmədən istifadə edək:

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>;
}

Bir checkbox verilib. Checkbox vasitəsilə istifadəçidən soruşun ki, onun 18 yaşı var ya yox? Əgər checkbox qeyd olunubsa, istifadəçiyə aşağıdakı kod blokunu göstərin:

<div>
	<h2>Ura, sizin artıq 18 yaşınız var</h2>
	<p>
		burada yalnız böyüklər üçün olan kontent yerləşir
	</p>
</div>

Əgər checkbox qeyd olunmayıbsa - onda aşağıdakı bloku:

<div>
	<p>
		təəssüf, sizin hələ 18 yaşınız yoxdur:(
	</p>
</div>

Bir checkbox və abzas verilib. Əgər checkbox qeyd olunubsa, abzas ekranda görünən olsun, əgər qeyd olunmayıbsa - onu gizlədin.