Reactда чекбокслар ва шартли рендеринг

Келинг, чекбокс белгиланганлигига қараб, экранга бир хил бўлмаган кодни чиқаришни таъминлайми. Бунинг учун шартли рендерингдан фойдаланамиз:

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

Чекбокс берилган. Чекбокс ёрдамида фойдаланувчидан сўранг, унга 18 ёш бормию. Агар чекбокс белгиланган бўлса, фойдаланувчига куйидаги код блокини кўрсатинг:

<div>
	<h2>Ұрра, сизга 18 ёш бўлган</h2>
	<p>
		бу ерда факат катталар учунгина контент жойлашган
	</p>
</div>

Агар чекбокс белгиланмаган бўлса - куйидагини:

<div>
	<p>
		афсуски, сизга ҳали 18 ёш бўлмаган:(
	</p>
</div>

Чекбокс ва абзац берилган. Агар чекбокс белгиланган бўлса, абзац экранда кўринувчи бўлсин, агар белгиланмаган бўлса - уни яширинг.