Opérateur ternaire dans JSX

Comme vous le savez déjà, à l'intérieur des accolades on peut exécuter du code JavaScript. En réalité, ce code ne peut pas être n'importe lequel, mais seulement le plus simple.

En particulier, les conditions if ne peuvent pas y être utilisées. À la place, il faut utiliser les versions raccourcies des conditions.

En fonction de la valeur de la constante show, affichons un texte ou un autre. Utilisons pour cela l'opérateur ternaire :

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

On peut travailler non seulement avec des textes, mais aussi avec des balises :

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

Voici le code suivant :

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

Si 18 ans ou plus sont enregistrés dans age, alors dans le texte de la balise div, montrez à l'utilisateur un paragraphe avec un texte, et si moins - avec un autre.