Checkboxit ja ehdollinen renderöinti Reactissa

Tehdään niin, että checkboxin tilasta riippuen näytetään joko yksi koodinpätkä tai toinen. Käytetään siihen ehdollista renderöintiä:

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

Annettu checkbox. Kysy checkboxin avulla käyttäjältä, onko hänellä jo 18 vuotta. Jos checkbox on valittuna, näytä käyttäjälle seuraava koodilohko:

<div>
	<h2>Huraa, sinulla on jo 18 vuotta</h2>
	<p>
		tässä on sisältöä vain aikuisille
	</p>
</div>

Ja jos checkboxia ei ole valittu - näytä seuraava:

<div>
	<p>
		valitettavasti sinulla ei ole vielä 18 vuotta:(
	</p>
</div>

Annettu checkbox ja kappale. Jos checkbox on valittuna, anna kappaleen olla näkyvissä näytöllä, ja jos ei ole valittuna - piilota se.