Use--for-a-more-concise-conditional

JavaScript
1

Tell us what’s happening:

I followed the instruction but my code did not work…
Any help would be appreciated

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36.

Link to the challenge:

1 Like
2

Reading your code, in the render method, you might be the victim of an errant cut-and-paste. You have an unmatched left curly brace because of this line:

{this.state.display &&

and you also have a bunch of JSX outside of your return() statement. My best advice is just reset the code and start again. I’ve had to do that few times now in the React lessons myself.

3

return is in the wrong place.

...
render() {
      return(
        {this.state.display && 
        <div>
         <button onClick={this.toggleDisplay}>Toggle Display </button>
         <h1> Displayed! </h1>
       </div>}
      <div>
            <button onClick={this.toggleDisplay}>Toggle Display</button> 
      </div>
)
}

This creates another problem. Adjacent or sibling divs. One option is to return an array and separate the divs with a comma. Make sure to add a key prop to each item when returning an array with React. Otherwise you will get a warning in the console.

...
return([
      {this.state.display && <div key='1'>...</div>},
      <div key='2'>...</div>
])

The other, and probably easier thing to do is to wrap the two sibling divs in another div. Thus only returning one div.

...
return(
      <div>
             {this.state.display && <div>...</div>}
             <div>...</div>
      </div>
)

Sorry for the long explanation but I know learning React is a never ending process and somethings knowing these things in detail is helpful. These types of conditionals I find really useful. Good Luck.

1 Like
4

just wrap your JSX code around the element (

) that requires the conditional toggle
1 Like
5

@TheLambChop
Why return two separate divs, or one wrapping both?

You can reuse a single div to solve the problem, the only optional scenario that you have to consider is whether the

<h1>Displayed!</h1>

should appear or not. So,

render() 
{
    return
    (
       <div>
           <button onClick={this.toggleDisplay}>
                 Toggle Display 
           </button>
           {this.state.display && <h1> Displayed! </h1> }
      </div>
    );
}

I think this should solve the problem pretty easily, thereby returning a single div.

21 Likes
6

bro, your answer is perfect… keep it up your Good Works

2 Likes