Closing React Semantic UI modal with button and close icon : <p>I have a Modal where the user needs to fill in some forms and save whatever was filled in through a button in the Modal. When the user saves I would like the modal to close. I can get this done, through using the <code>open</code> prop on the <code>Modal</code> component. But if I do this, the modal doesn't close when I attempt to do so through the closeIcon.</p>

<p>What can I do to allow the user to close the Modal through both methods?</p>

<p>Here is my current modal code:</p>

<pre><code>  handleCreateButton (evt) {
    evt.preventDefault()
    // ...
    // code to save whatever was typed in the form
    // ...

    this.setState({showModal: false})
  }

  renderModalForm () {
    const {
      something,
      showModal
    } = this.state

    // if I have the open props, I get to close the Modal after the button is clicked
    // however, when using the icon or clicking on dimmer it wont work anymore.
    return (
      &lt;Modal closeIcon closeOnDimmerClick open={showModal} trigger={&lt;Button onClick={() =&gt; this.setState({showModal: true})}&gt;&lt;Icon className='plus'/&gt;New Challenge&lt;/Button&gt;}&gt;
        &lt;Modal.Header&gt;My Modal&lt;/Modal.Header&gt;
        &lt;Modal.Content&gt;
          &lt;Form&gt;
            &lt;Form.Input
              label='Something'
              value={something}
              onChange={(evt) =&gt; this.handleChangeForms('something', evt.target.value)}
            /&gt;
            &lt;Button onClick={(evt) =&gt; this.handleCreateButton(evt)}&gt;Save&lt;/Button&gt;
          &lt;/Form&gt;
        &lt;/Modal.Content&gt;
      &lt;/Modal&gt;
    )
  }
</code></pre>
