title: Close React Modal With Submit
body: <p>Hello there I'm trying to figure out how to close this modal and submit a new item at the same time... right now it's only doing one or the other. If I put <code>&lt;button onClick={this.handleCloseModal}&gt;Submit&lt;/button&gt;</code> at the bottom there it wont submit the information in the form and if I take away <code>{this.handleCloseModal}</code> then it'll add the item but I have to refresh to close the modal.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class AddItem extends React.Component {
   constructor() {
    super();
    this.state = {
     showModal: false
    };
  
    this.handleOpenModal = this.handleOpenModal.bind(this);
       this.handleCloseModal = this.handleCloseModal.bind(this);
     }
    
      handleOpenModal () {
       this.setState({ showModal: true });
     }
    
      handleCloseModal () {
       this.setState({ showModal: false });
     }
  
  
   render() {
    return(
    &lt;div&gt;
    &lt;button onClick={this.handleOpenModal}&gt;Add Item&lt;/button&gt;
    &lt;ReactModal isOpen={this.state.showModal}&gt;
    &lt;form 
     onSubmit={(event) =&gt; {
      event.preventDefault()
  
      const input = {
       name: event.target.itemName.value,
       price: event.target.itemPrice.value,
       description: event.target.itemDescription.value, 
       userEmail: this.props.currentUser.email
     }
  
      this.props.dispatch(saveItem(input))
    
      event.target.itemName.value = ''
      event.target.itemPrice.value = ''
      event.target.itemDescription.value = ''
    
     }}&gt;
      &lt;label&gt;
       Item Name:
       &lt;br /&gt;
       &lt;input type="text" name="itemName" validate={[required, nonEmpty]} /&gt;
      &lt;/label&gt;
      &lt;br /&gt;
      &lt;label&gt;
       Price:
       &lt;br /&gt;
       &lt;input type="text" name="itemPrice" validate={[required, nonEmpty]} /&gt;
      &lt;/label&gt;
      &lt;br /&gt;
      
      &lt;br /&gt;
      &lt;label&gt;
      Description:
       &lt;br /&gt;
       &lt;textarea type="text" name="itemDescription" validate={[required, nonEmpty]} /&gt;
      &lt;/label&gt;
      &lt;br /&gt;
      &lt;button onClick={this.handleCloseModal}&gt;Submit&lt;/button&gt;
     &lt;/form&gt;
     &lt;/ReactModal&gt;
     &lt;/div&gt;
    )
   }
  }
  
  const mapStateToProps = state =&gt; ({
      currentUser: state.auth.currentUser
  });
   
   export default withRouter(connect(mapStateToProps)(AddItem));</code></pre>
  </div>
  </div>
  </p>