React with if/else

JavaScript
1

Hi all !

Just a quick question , hope someone is willing to help :slight_smile:
when I click the ‘toggle display’ button , the text ‘Displayed!’ appears-reappears , so it seems to work, yet it doesn’t seem to be correct as it doesn’t pass. Any idea what could be the reason?
Thanks


class MyComponent extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    display: true
  }
  this.toggleDisplay = this.toggleDisplay.bind(this);
}

toggleDisplay() {
  this.setState({
    display: !this.state.display
  });
}
render() {
  let hide={}
  if(this.state.display){
    hide={display:"block"}
  }else {
    hide={display:"none"}
  }
  return (
     <div>
       <button onClick={this.toggleDisplay}>Toggle Display</button>
       <h1 style={hide}>Displayed!</h1>
     </div>
  );
}
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:78.0) Gecko/20100101 Firefox/78.0.

Challenge: Render with an If-Else Condition

Link to the challenge:

2

Your method definitely works and is clever! The thing is, your method has the H1 element being rendered both times, you’re just hiding it if the toggle is set to off.

So what they’re looking for is no H1 element, just the button being rendered if the display toggle is false, or if it is true then the button and an H1 element.

1 Like
3

Great work so far,
your solution is a working one.

In React, you want a component/element not to render at all, instead of display: none

Example in JSX:

{
  showCat
    ? <h1>This is a cat</h1>
    : <h1>This is a dog</h1>
}