Используйте тернарный оператор для условного рендеринга
Прежде чем перейти к динамическим методам рендеринга, есть еще один способ использовать встроенные условия JavaScript для рендеринга того, что вы хотите: тернарный оператор. Тернарный оператор часто используется как сокращение для операторов if/else в JavaScript. Они не такие гибкие, как традиционные инструкции if/else, но они очень популярны среди разработчиков React. Одна из причин этого заключается в том, что JSX скомпилирован так, что инструкции if/else не могут быть вставлены непосредственно в код JSX. Возможно, вы заметили это несколько задач назад - когда требовался оператор if/else, он всегда находился за пределами JSX-разметки . Тернарные выражения могут быть отличной альтернативой, если вы хотите реализовать условную логику в своем JSX. Напомним, что тройной оператор состоит из трех частей, но вы можете комбинировать несколько тройных выражений.
В редакторе кода есть три константы, определенные в методе render () компонента CheckUserAge. Они называются buttonOne,
buttonTwo и buttonThree. Каждому из них назначается простое выражение JSX, представляющее элемент кнопки. Сначала
инициализируйте состояние CheckUserAge с помощью input и userAge, для которых установлены значения пустой строки.
Когда компонент отображает информацию на странице, пользователи должны иметь возможность взаимодействовать с ним. В
операторе return компонента настройте тернарное выражение, реализующее следующую логику: при первой загрузке страницы
отобразить на странице кнопку отправки, buttonOne. Затем, когда пользователь вводит свой возраст и нажимает кнопку,
визуализируйте другую кнопку в зависимости от возраста. Если пользователь вводит число меньше 18, отобразите
buttonThree. Если пользователь вводит число больше или равное 18, отобразите buttonTwo.
Подсказка: Не забудьте инициировать стейт в конструкторе класса.