Ternary Operator in JSX

As you already know, JavaScript code can be executed inside curly brackets. In fact, this code can be not any, but only the simplest.

In particular, the conditions if cannot be used there. Instead, abbreviated versions of the conditions should be used.

Let's output one or another text depending on the value of the constant show. Let's use the ternary operator for this:

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

You can work not only with texts, but also with tags:

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

The following code is given:

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

If age is more than 18 years old, then in the text of the tag div show the user a paragraph with one text, and if less, then with another.