Применение условий в 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;
}