Vibonyeo na Uchoraji Masharti katika React

Wacha tufanye ili kulingana na alama ya kibonyeo, kipande kimoja cha msimbo kionyeshwe kwenye skrini, au kingine. Tutumie kwa hili uchoraji masharti:

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

Kibonyeo kimetolewa. Kwa kutumia kibonyeo, muulize mtumiaji kama amekwisha kufikia umri wa miaka 18. Kama kibonyeo kimewekwa alama, mwonyeshe mtumiaji kipande kifuatacho cha msimbo:

<div>
	<h2>Hongera, umefikia umri wa miaka 18</h2>
	<p>
		hapa kuna maudhui kwa watu wazima pekee
	</p>
</div>

Na ikiwa kibonyeo hakijawekwa alama - kisha kipande hiki:

<div>
	<p>
		samahani, bado haujafikia umri wa miaka 18:(
	</p>
</div>

Kibonyeo na aya kimetolewa. Ikiwa kibonyeo kimewekwa alama, acha aya iwe inayoonekana kwenye skrini, na ikiwa hajaawekwa alama - ufichie.