Ternaire operator in JSX

Zoals je al weet, kun je binnen de accolades JavaScript code uitvoeren. Eigenlijk kan deze code niet zomaar elke code zijn, maar alleen de eenvoudigste.

In het bijzonder kunnen voorwaarden zoals if daar niet gebruikt worden. In plaats daarvan moet je gebruik maken van verkorte varianten van voorwaarden.

Laten we, afhankelijk van de waarde van de constante show, de ene of de andere tekst weergeven. Laten we hiervoor de ternaire operator gebruiken:

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

Je kunt niet alleen werken met teksten, maar ook met tags:

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

Gegeven de volgende code:

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

Als in age meer dan 18 jaar staat, toon de gebruiker dan in de tekst van de div tag een alinea met de ene tekst, en als het minder is - dan met een andere.