freeCodeCamp Challenge Guide: Use && for a More Concise Conditional

Guide
1

Use && for a More Concise Conditional

Problem Explanation

The example given is

{condition && <p>markup</p>}

which is demonstrated below using the condition of the this.state.dinnerCooked boolean.
If the boolean is true the markup included in the {} with the condition will display, if not it will not display

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dinnerCooked: true
    }   
  }
  render() {  
    return (
       <div>       
         {this.state.dinnerCooked &&<h1>Dinner is Cooked!</h1>}//h1 tag contents will be displayed
       </div>
    );
  }
};

Hints

Hint 1

You don’t have to do a full if/then statement. Just write the condition you are checking.

Solutions

Solution 1 (Click to Show/Hide)

As you can see, you don’t have to write the full if/then statement. We only need to check the condition and see if it returns true or false. In this case, we are checking the value of display. If the value is true, then you return the value to the right of &&, which is <h1>Displayed!</h1>. If the condition is false, it returns nothing.

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>
    );
  }
};

Code Explanation

  • Explanation from ReactJS.org documentation

  • You may embed any expressions in JSX by wrapping them in curly braces. This includes the JavaScript logical && operator. It can be handy for conditionally including an element

  • It works because in JavaScript, true && expression always evaluates to expression, and false && expression always evaluates to false.

  • Therefore, if the condition is true, the element right after && will appear in the output. If it is false, React will ignore and skip it.

20 Likes