title: Closing React Semantic UI modal with button and close icon
body: <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>