Why this challenge doesn´t pass even if it´s working

https://learn.freecodecamp.org/front-end-libraries/react/use–for-a-more-concise-conditional/

I am so pissed lol since this i was stuck with this challenge for some time and I just sorted out how the short-circuit operator works in React but it just doesn´t pass the last test:

Here´s my render function:

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

Am I messing up in something? The code works though. It´s just I don´t want to look at the solutions in case this is not the correct answer

I think the challenge talks about the h1 element?
Try to apply the logic you find in the example to that tag.

1 Like

I agree with this. The purpose of the exercise was to reduce repetitive code, so there is no need to write the logic twice if you simply specify that the h1 should only display when something is true (because it will not display when false). You also don’t need the button element itself to be included in the logic statement.

I tried first to do it that way but I wasn´t able to. :sleepy: I guess i´ll have to scratch my head again

So I’m hoping someone more advanced then me will still reply and help make sense of this better, but I’m going to give it a try:

…so, per the solution provided by @newfoundglory

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

The second half of the solution: <h1>Displayed</h1> is naturally evaluated to true, so the real magic happens before the && in the evaluation if this.state.display does in fact evaluate to true (which of course goes back to the state of your state). So when the button’s onClick activates the updating of your state, then your <h1> check runs and as long as the first half is true, then the display will confirm the true statement with another true, otherwise you’ll end up with a false && true which of course is false overall and then the <h1> will not display as it will evaluate to false.

Something else to note, your <div> and <button> should always render and never be dependent upon your state, but the <h1> is different in this lesson and therefore depends upon the state.

I hope that makes sense?

@imi-tating and @newfoundglory Please don’t post working coding as responses. Please stick to giving hints and providing other examples to make your points. We want the campers to figure out the code for themselves without seeing working code.

Sorry, I figured since it was already posted it was okay at this point, also since I used the Blur Spoiler feature, but I will be sure not to do that in the future.

For anything other than the challenges (i.e. projects or non-FCC related problems/questions) the use of blurred code is fine. Some do not know what that blurred section means, so they may click on it and be surprised to see the answer they may not have been wanting to see. The Get a Hint button takes the user to a Guide article with a full working solution, so there is no reason to put solutions in responses.

Thanks for understanding.

1 Like

My bad, I corrected the answer

I was in fact avoiding to look at the solution but my eyes took a peak at the image although I didn´t read it enough it seems it was enough because I just solved it. :grin: But don´t worry bro thanks anyway and for the explanation