--- id: 5a24c314108439a4d4036187 title: Use a Ternary Expression for Conditional Rendering challengeType: 6 isRequired: false forumTopicId: 301414 localeTitle: Использование терминологического выражения для условного рендеринга --- ## Description
Прежде чем перейти к динамическим методам рендеринга, есть последний способ использовать встроенные условия JavaScript для рендеринга того, что вы хотите: трехмерный оператор . Тернарный оператор часто используется как ярлык для операторов if/else в JavaScript. Они не настолько устойчивы, как традиционные инструкции if/else , но они очень популярны среди разработчиков React. Одна из причин этого заключается в том, что JSX скомпилирован, if/else инструкции не могут быть вставлены непосредственно в код JSX. Возможно, вы заметили это несколько проблем назад - когда требовался оператор if/else , он всегда находился за пределами оператора return . Тернарные выражения могут быть отличной альтернативой, если вы хотите реализовать условную логику в своем JSX. Напомним, что тройной оператор состоит из трех частей, но вы можете комбинировать несколько тройных выражений. Вот основной синтаксис:
состояние ? выражениеIfTrue: выражениеIfFalse
## Instructions
The code editor has three constants defined within the CheckUserAge component's render() method. They are called buttonOne, buttonTwo, and buttonThree. Each of these is assigned a simple JSX expression representing a button element. First, initialize the state of CheckUserAge with input and userAge both set to values of an empty string. Once the component is rendering information to the page, users should have a way to interact with it. Within the component's return statement, set up a ternary expression that implements the following logic: when the page first loads, render the submit button, buttonOne, to the page. Then, when a user enters their age and clicks the button, render a different button based on the age. If a user enters a number less than 18, render buttonThree. If a user enters a number greater than or equal to 18, render buttonTwo.
## Tests
```yml tests: - text: The CheckUserAge component should render with a single input element and a single button element. testString: assert(Enzyme.mount(React.createElement(CheckUserAge)).find('div').find('input').length === 1 && Enzyme.mount(React.createElement(CheckUserAge)).find('div').find('button').length === 1); - text: The CheckUserAge component's state should be initialized with a property of userAge and a property of input, both set to a value of an empty string. testString: assert(Enzyme.mount(React.createElement(CheckUserAge)).state().input === '' && Enzyme.mount(React.createElement(CheckUserAge)).state().userAge === ''); - text: When the CheckUserAge component is first rendered to the DOM, the button's inner text should be Submit. testString: assert(Enzyme.mount(React.createElement(CheckUserAge)).find('button').text() === 'Submit'); - text: When a number of less than 18 is entered into the input element and the button is clicked, the button's inner text should read You Shall Not Pass. testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find(''button'').text(); const enter3AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''3'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const enter17AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''17'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const userAge3 = await enter3AndClickButton(); const userAge17 = await enter17AndClickButton(); assert(initialButton === ''Submit'' && userAge3 === ''You Shall Not Pass'' && userAge17 === ''You Shall Not Pass''); }; ' - text: When a number greater than or equal to 18 is entered into the input element and the button is clicked, the button's inner text should read You May Enter. testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find(''button'').text(); const enter18AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''18'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const enter35AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''35'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const userAge18 = await enter18AndClickButton(); const userAge35 = await enter35AndClickButton(); assert(initialButton === ''Submit'' && userAge18 === ''You May Enter'' && userAge35 === ''You May Enter''); }; ' - text: Once a number has been submitted, and the value of the input is once again changed, the button should return to reading Submit. testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const enter18AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''18'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const changeInputDontClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''5'' }}); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const enter10AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''10'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const userAge18 = await enter18AndClickButton(); const changeInput1 = await changeInputDontClickButton(); const userAge10 = await enter10AndClickButton(); const changeInput2 = await changeInputDontClickButton(); assert(userAge18 === ''You May Enter'' && changeInput1 === ''Submit'' && userAge10 === ''You Shall Not Pass'' && changeInput2 === ''Submit''); }; ' - text: Your code should not contain any if/else statements. testString: assert(new RegExp(/(\s|;)if(\s|\()/).test(Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()) === false); ```
## Challenge Seed
```jsx const inputStyle = { width: 235, margin: 5 } class CheckUserAge extends React.Component { constructor(props) { super(props); // change code below this line // change code above this line this.submit = this.submit.bind(this); this.handleChange = this.handleChange.bind(this); } handleChange(e) { this.setState({ input: e.target.value, userAge: '' }); } submit() { this.setState({ userAge: this.state.input }); } render() { const buttonOne = ; const buttonTwo = ; const buttonThree = ; return (

Enter Your Age to Continue


{ /* change code here */ }
); } }; ```
### After Tests
```jsx ReactDOM.render(, document.getElementById('root')) ```
## Solution
```jsx const inputStyle = { width: 235, margin: 5 } class CheckUserAge extends React.Component { constructor(props) { super(props); this.state = { userAge: '', input: '' } this.submit = this.submit.bind(this); this.handleChange = this.handleChange.bind(this); } handleChange(e) { this.setState({ input: e.target.value, userAge: '' }); } submit() { this.setState({ userAge: this.state.input }); } render() { const buttonOne = ; const buttonTwo = ; const buttonThree = ; return (

Enter Your Age to Continue


{ this.state.userAge === '' ? buttonOne : this.state.userAge >= 18 ? buttonTwo : buttonThree }
); } }; ```