Render with an If/Else Condition --help

JavaScript
1

Tell us what’s happening:

Not passing my test

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({
      display: !this.state.display
    });
  }
  render() {
    // change code below this line
    if(this.state.display == false) {
      return (
       <div>
         <button onClick={this.toggleDisplay}>Toggle Display</button>
         <h1>Displayed!</h1>
       </div>
    );
    }
    else {
      return (
       <div>
         <button onClick={this.toggleDisplay}>Toggle Display</button>
       </div>
    );
    }
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.162 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/render-with-an-ifelse-condition

2

Try it again :slight_smile: if you struggle with something specific let me know :stuck_out_tongue:

3 
When display is set to true, a div, button, and h1 should render.
When display is set to false, only a div and button should render

that’s what I get

4

You might want to reread https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements and related sections.
You clearly do not have full understanding of logical operators, so you need to revisit foundations before you go into this advanced stuff.

5

No, @sammyfak code is good @arigoru, but @sammyfak double check if you understood the question.
When display is set to true, a div, button, and h1 should render are you doing this?

6

Yes I am, and even it tally with the one at hint.

7

Your code below:

    if(this.state.display == false) {

asks if the display property of state is false. If it is, then you are currently telling it to show all three elements, instead of just the two elements (div and button).

8

thanks bro! You helped

9

If you wonder why can’t we write <h1 style={{ display:"none"}}>, being that inline-styling was taught 2 lessons before, and it works perfectly well, with less lines of code than the accepted solution… Well, I don’t know.

So in case you got stucked, try writing an if/else statement similar to this:

if(true){
///all the html here
}
else {
//all html but not the h1
}
10

I did that one but it gave me a build error.