Ο Τριαδικός Τελεστής στο JSX

Όπως ήδη γνωρίζετε, μέσα σε αγκύλες μπορείτε να εκτελέσετε κώδικα JavaScript. Στην πραγματικότητα αυτός ο κώδικας μπορεί να μην είναι οποιοσδήποτε, αλλά μόνο ο πιο απλός.

Συγκεκριμένα, οι συνθήκες if δεν μπορούν να εφαρμοστούν εκεί. Αντ' αυτού, θα πρέπει να χρησιμοποιείτε συντομευμένες εκδοχές συνθηκών.

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

function App() {
	const show = true;
	
	return <div>
		{show ? 'text1' : 'text2'}
	</div>;
}

Μπορείτε να δουλέψετε όχι μόνο με κείμενα, αλλά και με ετικέτες:

function App() {
	const show = true;
	
	return <div>
		{show ? <p>text1</p> : <p>text2</p>}
	</div>;
}

Δίνεται ο ακόλουθος κώδικας:

function App() {
	const age = 19;
	
	return <div>
		
	</div>;
}

Εάν το age περιέχει περισσότερα από 18 χρόνια, τόση στο κείμενο της ετικέτας div εμφανίστε για τον χρήστη μια παράγραφο με το ένα κείμενο, και εάν είναι λιγότερα - τότε με ένα άλλο.