Kontrollkastid ja tingimuslik renderdamine Reactis

Teeme nii, et sõltuvalt kontrollkasti märgist kuvatakse ekraanil kas üks koodijupp või teine. Kasutame selleks tingimuslikku renderdamist:

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

Antud on kontrollkast. Küsige kontrollkasti abil kasutajalt, kas ta on juba 18 aastat vana. Kui kontrollkast on märgitud, näidake kasutajale järgmist koodiplokki:

<div>
	<h2>Hurraa, sa oled juba 18</h2>
	<p>
		siin asub sisu ainult täiskasvanutele
	</p>
</div>

Kui kontrollkast pole märgitud - siis järgmist:

<div>
	<p>
		kahjuks, sa pole veel 18-aastane:(
	</p>
</div>

Antud on kontrollkast ja lõik. Kui kontrollkast on märgitud, olgu lõik ekraanil nähtav, aga kui pole märgitud - peidake see.