2018-10-10 22:03:03 +00:00
---
id: 5a24c314108439a4d4036185
2021-02-06 04:42:36 +00:00
title: Use & & for a More Concise Conditional
2018-10-10 22:03:03 +00:00
challengeType: 6
2020-09-17 16:13:42 +00:00
forumTopicId: 301413
2021-01-13 02:31:00 +00:00
dashedName: use--for-a-more-concise-conditional
2018-10-10 22:03:03 +00:00
---
2020-12-16 07:37:30 +00:00
# --description--
2018-10-10 22:03:03 +00:00
2021-02-06 04:42:36 +00:00
The if/else statements worked in the last challenge, but there's a more concise way to achieve the same result. Imagine that you are tracking several conditions in a component and you want different elements to render depending on each of these conditions. If you write a lot of `else if` statements to return slightly different UIs, you may repeat code which leaves room for error. Instead, you can use the `&&` logical operator to perform conditional logic in a more concise way. This is possible because you want to check if a condition is `true` , and if it is, return some markup. Here's an example:
2018-10-10 22:03:03 +00:00
2020-12-16 07:37:30 +00:00
`{condition && <p>markup</p>}`
2021-02-06 04:42:36 +00:00
If the `condition` is `true` , the markup will be returned. If the condition is `false` , the operation will immediately return `false` after evaluating the `condition` and return nothing. You can include these statements directly in your JSX and string multiple conditions together by writing `&&` after each one. This allows you to handle more complex conditional logic in your `render()` method without repeating a lot of code.
2018-10-10 22:03:03 +00:00
2020-12-16 07:37:30 +00:00
# --instructions--
2018-10-10 22:03:03 +00:00
2021-02-06 04:42:36 +00:00
Solve the previous example again, so the `h1` only renders if `display` is `true` , but use the `&&` logical operator instead of an `if/else` statement.
2018-10-10 22:03:03 +00:00
2020-12-16 07:37:30 +00:00
# --hints--
2021-02-06 04:42:36 +00:00
`MyComponent` should exist and render.
2018-10-10 22:03:03 +00:00
```js
2020-12-16 07:37:30 +00:00
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
return mockedComponent.find('MyComponent').length;
})()
);
2018-10-10 22:03:03 +00:00
```
2021-02-06 04:42:36 +00:00
When `display` is set to `true` , a `div` , `button` , and `h1` should render.
2018-10-10 22:03:03 +00:00
2020-12-16 07:37:30 +00:00
```js
async () => {
const waitForIt = (fn) =>
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
const state_1 = () => {
mockedComponent.setState({ display: true });
return waitForIt(() => mockedComponent);
};
const updated = await state_1();
assert(
updated.find('div').length === 1 & &
updated.find('div').children().length === 2 & &
updated.find('button').length === 1 & &
updated.find('h1').length === 1
);
};
```
2018-10-10 22:03:03 +00:00
2021-02-06 04:42:36 +00:00
When `display` is set to `false` , only a `div` and `button` should render.
2020-09-17 16:13:42 +00:00
2018-10-10 22:03:03 +00:00
```js
2020-12-16 07:37:30 +00:00
async () => {
const waitForIt = (fn) =>
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
const state_1 = () => {
mockedComponent.setState({ display: false });
return waitForIt(() => mockedComponent);
};
const updated = await state_1();
assert(
updated.find('div').length === 1 & &
updated.find('div').children().length === 1 & &
updated.find('button').length === 1 & &
updated.find('h1').length === 0
);
2020-09-17 16:13:42 +00:00
};
2018-10-10 22:03:03 +00:00
```
2020-08-13 15:24:35 +00:00
2021-02-06 04:42:36 +00:00
The render method should use the & & logical operator to check the condition of this.state.display.
2020-12-16 07:37:30 +00:00
```js
(getUserInput) => assert(getUserInput('index').includes('&&'));
```
2021-01-13 02:31:00 +00:00
# --seed--
## --after-user-code--
```jsx
ReactDOM.render(< MyComponent / > , document.getElementById('root'))
```
## --seed-contents--
```jsx
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
display: true
}
this.toggleDisplay = this.toggleDisplay.bind(this);
}
toggleDisplay() {
this.setState(state => ({
display: !state.display
}));
}
render() {
// Change code below this line
return (
< div >
< button onClick = {this.toggleDisplay} > Toggle Display< / button >
< h1 > Displayed!< / h1 >
< / div >
);
}
};
```
2020-12-16 07:37:30 +00:00
# --solutions--
2021-01-13 02:31:00 +00:00
```jsx
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
display: true
}
this.toggleDisplay = this.toggleDisplay.bind(this);
}
toggleDisplay() {
this.setState(state => ({
display: !state.display
}));
}
render() {
// Change code below this line
return (
< div >
< button onClick = {this.toggleDisplay} > Toggle Display< / button >
{this.state.display & & < h1 > Displayed!< / h1 > }
< / div >
);
}
};
```