Применение условий в JSX

Давайте сделаем так, чтобы в зависимости от содержимого константы show на экран вывелся или один, или другой текст:

function App() {
	let text;
	const show = true;
	
	if (show) {
		text = 'text1';
	} else {
		text = 'text2';
	}
	
	return <div>
		{text}
	</div>;
}

Можно сделать так, чтобы в переменной хранился не текст, а тег:

function App() {
	let text;
	const show = true;
	
	if (show) {
		text = <p>text1</p>;
	} else {
		text = <p>text2</p>;
	}
	
	return <div>
		{text}
	</div>;
}

Только показ

Можно сделать так, чтобы текст показывался, если в show будет true, и не показывался, если в ней будет false:

function App() {
	let text;
	const show = true;
	
	if (show) {
		text = <p>text</p>;
	}
	
	return <div>
		{text}
	</div>;
}

Возврат тегов

Можно возвращать через return переменную, содержащую тег:

function App() {
	let text;
	const show = true;
	
	if (show) {
		text = <p>text1</p>;
	} else {
		text = <p>text2</p>;
	}
	
	return text;
}

Практические задачи

Пусть в константе isAdult содержится true, если пользователю уже есть 18 лет, и false, если нет:

function App() {
	const isAdult = true;
	
	
}

Сделайте так, чтобы в зависимости от значения isAdult на экране показался или один абзац с текстом, или другой.

Пусть в константе isAdmin содержится true, если пользователь админ, и false, если нет:

function App() {
	const isAdmin = true;
	
	
}

Сделайте так, чтобы, если isAdmin имеет значение true, на экране показался див с абзацами. В противном случае ничего показывать не нужно.