React Render if/else test-can't pass it

1

I’m having trouble passing it. When I use true, it’s missing one test. I read a few posts to use ‘false’ instead but when I do, it makes a build error. What’s going on?

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 == true) {
    return (
       <div>
         <button onClick={this.toggleDisplay}>Toggle Display</button>
         <h1>Displayed!</h1>
       </div>
    );
  } else {
    return(
      <div>
      <button onClick = {this.toggle.display}>Toggle Display</button>
      </div>
    );
    }
  }
};
2

I believe they ask for something like this:

if(true){ 
return ( <div>
         <button onClick={this.toggleDisplay}>
          Toggle Display</button>
         <h1>Displayed!</h1>
       </div>
    );
}
else{
//not h1
}
3

Okay I’ll try that out.
Edit: what would I add after the ‘else’?

4

Hey there,

nice to meet you! :slightly_smiling_face:

I’ve edited your post for readability, because it was very hard to read.

You can use the “preformatted text” tool in the editor ( </> ) to add code.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

In the future, please use the Get Help button in a lesson to create a forum topic and fill in the questions.

Screenshot_2020-08-18_09-59-28

Thanks for understanding! :slightly_smiling_face:

5

What does the lesson tasks want you to do?

6

They just want a div and button. However, when I have it in, it won’t pass the test.

Screen Shot 2020-08-18 at 5.03.34 AM
Screen Shot 2020-08-18 at 5.03.34 AM2560×1600 961 KB

7

In your button, you are using this.toggle.display.
Where does this come from?

And please do not post images of your code,
use the “preformatted text” tool,
because then we can copy and paste your code. :slightly_smiling_face:

8

I used it in the last lesson, use advanced javascript in react render. I also saw it in the part where we’re not supposed to change it.
And I found that reformatted button.

9

Can you show us this line?

10 
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 == true) {
    return (
       <div>
         <button onClick={this.toggleDisplay}>Toggle Display</button>
         <h1>Displayed!</h1>
       </div>
    );
  } else {
    return(
      <div>
      <button onClick = {this.toggle.display}>Toggle Display</button>
      </div>
    );
    }
  }
};
11

I asked for the line this.toggle.display and your answer was

But you wrote the stuff yourself.

When you reset the code, you will see the starting code.

12

Here’s the code that was reset. I don’t know how to highlight on here or I would show you.

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

What do you want to show?

There is no this.toggle.display,
there is only this.toggleDisplay.

14

Oh. That looks like a typo.

1 Like