React-da Chekbokslar va shartli renderlash

Keling, chekboks belgilanganiga qarab, ekranga bir dona kod bo'lagi yoki boshqasi chiqarilishini ta'minlaylik. Buning uchun shartli renderlashdan foydalanamiz:

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

Chekboks berilgan. Chekboks yordamida foydalanuvchidan soring, uning yoshi 18 dan oshganmi. Agar chekboks belgilangan bo'lsa, foydalanuvchiga quyidagi kod blokini ko'rsating:

<div>
	<h2>Xursandchilik, sizning yoshingiz 18 dan oshgan</h2>
	<p>
		bu yerda faqat kattalar uchun kontent joylashgan
	</p>
</div>

Agar chekboks belgilanmagan bo'lsa - quyidagini:

<div>
	<p>
		afsus, sizning yoshingiz hali 18 ga yetmagan:(
	</p>
</div>

Chekboks va abzas berilgan. Agar chekboks belgilangan bo'lsa, abzas ekranda ko'rinadigan bo'lsin, agar belgilanmagan bo'lsa - uni yashiring.