if/else
statements in JavaScript. They're not quite as robust as traditional if/else
statements, but they are very popular among React developers. One reason for this is because of how JSX is compiled, if/else
statements can't be inserted directly into JSX code. You might have noticed this a couple challenges ago — when an if/else
statement was required, it was always outside the return
statement. Ternary expressions can be an excellent alternative if you want to implement conditional logic within your JSX. Recall that a ternary operator has three parts, but you can combine several ternary expressions together. Here's the basic syntax:
condition ? expressionIfTrue : expressionIfFalse
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
.
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, 'The CheckUserAge
component should render with a single input
element and a single button
element.');
- 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 === '', '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.');
- 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', 'When the CheckUserAge
component is first rendered to the DOM, the button
's inner text should be 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'', ''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
.''); }; '
- 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'', ''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
.''); }; '
- 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'', ''Once a number has been submitted, and the value of the input
is once again changed, the button
should return to reading 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, 'Your code should not contain any if/else
statements.');
```