Тернарен оператор в 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 покажете на потребителя абзац с един текст, а ако е по-малко - то с друг.