Применение условий в 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, и не показывался, если в show будет 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, на экране показался див с абзацами. В противном случае ничего показывать не нужно.