Rodal doesn't close

[nikkiczx]

The rodal doesn't no matter what I do. Even if I do click on the close button. A portion of my code is below. I've checked that when I click the close button, the state changes from true to false but the rodal doesn't close. How do I make it close?

Please help. Thanks!

<div className="col-xs-12 table-fonts table-row-hover" onClick={this.eventPage.bind(this,event._id)} style={{top: '50px'}} key={event._id}>
                              <Rodal visible={this.state.visible} animation="flip" onClose={this.hide.bind(this)}>
                                  <ShowEvent />
                              </Rodal>
</div>

[chenjiahan]

@nikkiczx Can you provide a minimal demo of the problem via https://jsfiddle.net or similar?

[nikkiczx]

I can try. But how do I add Rodal to jsfiddle?

[chenjiahan]

Here is a demo in codesandbox.

[nikkiczx]

Ok.. Can you try this and see if it works? https://codesandbox.io/s/mwNp69xK9

[chenjiahan]

@nikkiczx Can't find any changes, did you save your code?

[nikkiczx]

Yikes.. Sorry. Just saved it.

[chenjiahan]

@nikkiczx You should put the rodal outside the button. If you put the rodal inside the button, the click event of button will be triggered when you click rodal.

<button onClick={this.editEvent.bind(this, event._id)} className="fa fa-pencil-square-o fa-lg zero-padding" style={{color: 'green', top: '15px'}}>Test</button>
<Rodal visible={this.state.visible} animation="flip" onClose={this.hide.bind(this)}>
    Test
</Rodal>

[nikkiczx]

OMG.. Thank you! I don't know why I did it that way to begin with facepalm