Why wouldn't 'true' show in DOM if used as conditional for a tag in brackets in render method?

JavaScript
1

Tell us what’s happening:
I was able to pass the tests, but I’m wondering why the DOM does not show the word ‘true’ since {this.state.display} evaluates to true. It does go on to display ‘Displayed!’

Your code so far


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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Safari/605.1.15.

Challenge: Use && for a More Concise Conditional

Link to the challenge:

2

Hello there,

This just has to do with what the && operator in JavaScript does. It has nothing to do with React, in this case.
Here is some info from the docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND

In essence,

  • This is a statement: {this.state.display && <h1>Displayed!</h1>}
  • This is an operator: && (do not be fooled; it is as much an operator as + or -)
  • The result of oneThing && twoThing works as follows:
    • if (oneThing) { return twoThing; }
    • else { return twoThing }

Hope this helps