Operatore Ternario in JSX

Come già sapete, all'interno delle parentesi graffe si può eseguire codice JavaScript. In realtà questo codice non può essere qualsiasi, ma solo il più semplice.

In particolare, le condizioni if non possono essere utilizzate lì. Invece, si dovrebbero usare le versioni abbreviate delle condizioni.

A seconda del valore della costante show, visualizziamo un testo o un altro. Usiamo a questo scopo l'operatore ternario:

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

Si può lavorare non solo con testi, ma anche con tag:

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

È dato il seguente codice:

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

Se in age è memorizzato un valore maggiore di 18, allora nel testo del tag div mostra all'utente un paragrafo con un testo, e se è minore - con un altro.