Τα checkboxes και η υπό συνθήκη απόδοση στο React

Ας κάνουμε έτσι ώστε ανάλογα με την επιλογή του checkbox, να εμφανίζεται στην οθόνη είτε ένα κομμάτι κώδικα, είτε ένα άλλο. Θα χρησιμοποιήσουμε για αυτό την υπό συνθήκη απόδοση:

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>;
}

Δίνεται ένα checkbox. Με τη βοήθεια του checkbox ρωτήστε τον χρήστη αν είναι ήδη 18 ετών. Εάν το checkbox είναι επιλεγμένο, δείξτε στον χρήστη το ακόλουθο block κώδικα:

<div>
	<h2>Ζήτω, είστε ήδη 18</h2>
	<p>
		εδώ βρίσκεται περιεχόμενο μόνο για ενήλικες
	</p>
</div>

Και αν το checkbox δεν είναι επιλεγμένο - τότε το ακόλουθο:

<div>
	<p>
		δυστυχώς, δεν είστε ακόμη 18 ετών:(
	</p>
</div>

Δίνονται ένα checkbox και μια παράγραφος. Εάν το checkbox είναι επιλεγμένο, αφήστε την παράγραφο να είναι ορατή στην οθόνη, ενώ αν δεν είναι επιλεγμένο - αποκρύψτε την.