Custom modal is displaying despite condition not met in ReactJS?

Question

On my log in page I want to show a modal with a picture when a failed login attempt is made.

in my render() I have this exert:

<ToggleDisplay show={this.state.failedLogin} tag="section">
    <Lightbox show={this.state.failedLogin} mainSrc={pic}  hideOnOverlayClicked 
    </Lightbox>
</ToggleDisplay>

The problem I'm having is the picture is shown when the page is loaded even though show=false by default. How do I have the picture display only when show=true?

Answer 1

How about doing like this:

{ this.state.failedLogin && (
 <ToggleDisplay tag="section">
   <Lightbox show={this.state.failedLogin} mainSrc={pic}  
     hideOnOverlayClicked 
   </Lightbox>
 </ToggleDisplay>
)}