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>

Чекбокс жана абзац берилген. Эгерде чекбокс белгиленсе, абзац экранда көрүнүшү керек, ал эми эгерде белгиленбесе - аны жашырыңыз.