Чекбоксҳо ва рендеринг шартӣ дар 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>

Чекбокс ва абзас дода шудаанд. Агар чекбокс аломат зада шуда бошад, бигзор абзас дар экран намоён бошад, ва агар аломат нашуда бошад - онро пинҳон кунед.