Чекбокстер және 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>

Чекбокс және абзац берілген. Егер чекбокс белгіленген болса, абзац экранда көрінетін болсын, ал егер белгіленбеген болса - оны жасырыңыз.