* chore: rename APIs and Microservices to include "Backend" (#42515) * fix typo * fix typo * undo change * Corrected grammar mistake Corrected a grammar mistake by removing a comma. * change APIs and Microservices cert title * update title * Change APIs and Microservices certi title * Update translations.json * update title * feat(curriculum): rename apis and microservices cert * rename folder structure * rename certificate * rename learn Markdown * apis-and-microservices -> back-end-development-and-apis * update backend meta * update i18n langs and cypress test Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * fix: add development to front-end libraries (#42512) * fix: added-the-word-Development-to-front-end-libraries * fix/added-the-word-Development-to-front-end-libraries * fix/added-word-development-to-front-end-libraries-in-other-related-files * fix/added-the-word-Development-to-front-end-and-all-related-files * fix/removed-typos-from-last-commit-in-index.md * fix/reverted-changes-that-i-made-to-dependecies * fix/removed xvfg * fix/reverted changes that i made to package.json * remove unwanted changes * front-end-development-libraries changes * rename backend certSlug and README * update i18n folder names and keys * test: add legacy path redirect tests This uses serve.json from the client-config repo, since we currently use that in production * fix: create public dir before moving serve.json * fix: add missing script * refactor: collect redirect tests * test: convert to cy.location for stricter tests * rename certificate folder to 00-certificates * change crowdin config to recognise new certificates location * allow translations to be used Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * add forwards slashes to path redirects * fix cypress path tests again * plese cypress * fix: test different challenge Okay so I literally have no idea why this one particular challenge fails in Cypress Firefox ONLY. Tom and I paired and spun a full build instance and confirmed in Firefox the page loads and redirects as expected. Changing to another bootstrap challenge passes Cypress firefox locally. Absolutely boggled by this. AAAAAAAAAAAAAAA * fix: separate the test Okay apparently the test does not work unless we separate it into a different `it` statement. >:( >:( >:( >:( Co-authored-by: Sujal Gupta <55016909+heysujal@users.noreply.github.com> Co-authored-by: Noor Fakhry <65724923+NoorFakhry@users.noreply.github.com> Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
281 lines
8.8 KiB
Markdown
281 lines
8.8 KiB
Markdown
---
|
|
id: 5a24c314108439a4d4036187
|
|
title: Use a Ternary Expression for Conditional Rendering
|
|
challengeType: 6
|
|
forumTopicId: 301414
|
|
dashedName: use-a-ternary-expression-for-conditional-rendering
|
|
---
|
|
|
|
# --description--
|
|
|
|
Before moving on to dynamic rendering techniques, there's one last way to use built-in JavaScript conditionals to render what you want: the <dfn>ternary operator</dfn>. The ternary operator is often utilized as a shortcut for `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:
|
|
|
|
```jsx
|
|
condition ? expressionIfTrue : expressionIfFalse;
|
|
```
|
|
|
|
# --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`.
|
|
|
|
# --hints--
|
|
|
|
The `CheckUserAge` component should render with a single `input` element and a single `button` element.
|
|
|
|
```js
|
|
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's state should be initialized with a property of `userAge` and a property of `input`, both set to a value of an empty string.
|
|
|
|
```js
|
|
assert(
|
|
Enzyme.mount(React.createElement(CheckUserAge)).state().input === '' &&
|
|
Enzyme.mount(React.createElement(CheckUserAge)).state().userAge === ''
|
|
);
|
|
```
|
|
|
|
When the `CheckUserAge` component is first rendered to the DOM, the `button`'s inner text should be Submit.
|
|
|
|
```js
|
|
assert(
|
|
Enzyme.mount(React.createElement(CheckUserAge)).find('button').text() ===
|
|
'Submit'
|
|
);
|
|
```
|
|
|
|
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`.
|
|
|
|
```js
|
|
(() => {
|
|
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');
|
|
mockedComponent.update();
|
|
return mockedComponent.find('button').text();
|
|
};
|
|
const enter17AndClickButton = () => {
|
|
mockedComponent
|
|
.find('input')
|
|
.simulate('change', { target: { value: '17' } });
|
|
mockedComponent.find('button').simulate('click');
|
|
mockedComponent.update();
|
|
return mockedComponent.find('button').text();
|
|
};
|
|
const userAge3 = enter3AndClickButton();
|
|
const userAge17 = enter17AndClickButton();
|
|
assert(
|
|
initialButton === 'Submit' &&
|
|
userAge3 === 'You Shall Not Pass' &&
|
|
userAge17 === 'You Shall Not Pass'
|
|
);
|
|
})();
|
|
```
|
|
|
|
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`.
|
|
|
|
```js
|
|
(() => {
|
|
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');
|
|
mockedComponent.update();
|
|
return mockedComponent.find('button').text();
|
|
};
|
|
const enter35AndClickButton = () => {
|
|
mockedComponent
|
|
.find('input')
|
|
.simulate('change', { target: { value: '35' } });
|
|
mockedComponent.find('button').simulate('click');
|
|
mockedComponent.update();
|
|
return mockedComponent.find('button').text();
|
|
};
|
|
const userAge18 = enter18AndClickButton();
|
|
const userAge35 = enter35AndClickButton();
|
|
assert(
|
|
initialButton === 'Submit' &&
|
|
userAge18 === 'You May Enter' &&
|
|
userAge35 === 'You May Enter'
|
|
);
|
|
})();
|
|
```
|
|
|
|
Once a number has been submitted, and the value of the `input` is once again changed, the `button` should return to reading `Submit`.
|
|
|
|
```js
|
|
(() => {
|
|
const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge));
|
|
const enter18AndClickButton = () => {
|
|
mockedComponent
|
|
.find('input')
|
|
.simulate('change', { target: { value: '18' } });
|
|
mockedComponent.find('button').simulate('click');
|
|
mockedComponent.update();
|
|
return mockedComponent.find('button').text();
|
|
};
|
|
const changeInputDontClickButton = () => {
|
|
mockedComponent
|
|
.find('input')
|
|
.simulate('change', { target: { value: '5' } });
|
|
mockedComponent.update();
|
|
return mockedComponent.find('button').text();
|
|
};
|
|
const enter10AndClickButton = () => {
|
|
mockedComponent
|
|
.find('input')
|
|
.simulate('change', { target: { value: '10' } });
|
|
mockedComponent.find('button').simulate('click');
|
|
mockedComponent.update();
|
|
return mockedComponent.find('button').text();
|
|
};
|
|
const userAge18 = enter18AndClickButton();
|
|
const changeInput1 = changeInputDontClickButton();
|
|
const userAge10 = enter10AndClickButton();
|
|
const changeInput2 = changeInputDontClickButton();
|
|
assert(
|
|
userAge18 === 'You May Enter' &&
|
|
changeInput1 === 'Submit' &&
|
|
userAge10 === 'You Shall Not Pass' &&
|
|
changeInput2 === 'Submit'
|
|
);
|
|
})();
|
|
```
|
|
|
|
Your code should not contain any `if/else` statements.
|
|
|
|
```js
|
|
assert(
|
|
new RegExp(/(\s|;)if(\s|\()/).test(
|
|
Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()
|
|
) === false
|
|
);
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --after-user-code--
|
|
|
|
```jsx
|
|
ReactDOM.render(<CheckUserAge />, document.getElementById('root'));
|
|
```
|
|
|
|
## --seed-contents--
|
|
|
|
```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(state => ({
|
|
userAge: state.input
|
|
}));
|
|
}
|
|
render() {
|
|
const buttonOne = <button onClick={this.submit}>Submit</button>;
|
|
const buttonTwo = <button>You May Enter</button>;
|
|
const buttonThree = <button>You Shall Not Pass</button>;
|
|
return (
|
|
<div>
|
|
<h3>Enter Your Age to Continue</h3>
|
|
<input
|
|
style={inputStyle}
|
|
type='number'
|
|
value={this.state.input}
|
|
onChange={this.handleChange}
|
|
/>
|
|
<br />
|
|
{/* Change code below this line */}
|
|
|
|
{/* Change code above this line */}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```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(state => ({
|
|
userAge: state.input
|
|
}));
|
|
}
|
|
render() {
|
|
const buttonOne = <button onClick={this.submit}>Submit</button>;
|
|
const buttonTwo = <button>You May Enter</button>;
|
|
const buttonThree = <button>You Shall Not Pass</button>;
|
|
return (
|
|
<div>
|
|
<h3>Enter Your Age to Continue</h3>
|
|
<input
|
|
style={inputStyle}
|
|
type='number'
|
|
value={this.state.input}
|
|
onChange={this.handleChange}
|
|
/>
|
|
<br />
|
|
{this.state.userAge === ''
|
|
? buttonOne
|
|
: this.state.userAge >= 18
|
|
? buttonTwo
|
|
: buttonThree}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
```
|