title: React component calling submit function whenever component changes
body: <p>I have a react-strap modal that's used for booking meetings that get stored in an sql database. Heres the modal component:</p>
  
  <pre><code>import React from 'react';
  import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Col, Form, FormGroup, Label, Input, Container,Alert } from 'reactstrap';
  import Request from './Request.js'
  class Appointment extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        modal: false,
        Date: null,
        description: ""
      };
  
      this.toggle       = this.toggle.bind(this);
      this.bookMeeting  = this.bookMeeting.bind(this);
      this.handleEvent  = this.handleEvent.bind(this);
    }
  
    toggle() {
      this.setState(prevState =&gt; ({
        modal: !prevState.modal
      }));
    }
  
    bookMeeting(){
      console.log("subtmit!")
      if(this.state.Date != null &amp;&amp; this.state.description != "")
      {
        let date = this.state.Date
        let desc = this.state.description
        const requestBody = {
          date: date,
          description:desc
        }
        const config = {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
        Request.post("http://localhost:4000/bookAppointment",requestBody,config)
        .then((results) =&gt; console.log(results))
        .catch(err =&gt; console.log(err))
      }
    }
    handleEvent(event){
      var key = event.target.id
      var val= event.target.value
      console.log([key] + ":" + val)
      this.setState({[key]:val})
  
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;Button color="danger" onClick={this.toggle}&gt;{this.props.buttonLabel}&lt;/Button&gt;
          &lt;Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}&gt;
            &lt;ModalHeader toggle={this.toggle}&gt;Set up a meeting&lt;/ModalHeader&gt;
            &lt;ModalBody&gt;
              &lt;article&gt; Here you can set up a meeting with your partner. Just provide a date and a time and a small description of the meeting! We'll keep track of it for you and remind you when its coming up!&lt;/article&gt;
              &lt;hr/&gt;
              &lt;div&gt;
                &lt;Form&gt;
                  &lt;FormGroup&gt;
                    &lt;Label for="Date"&gt;Date:&lt;/Label&gt;
                    &lt;Input type="Date" id="Date" name="Date"onChange={this.handleEvent}/&gt;
                  &lt;/FormGroup&gt;
                  &lt;FormGroup&gt;
                    &lt;Label for="description"&gt;Description:&lt;/Label&gt;
                    &lt;Input type="textarea" id="description" name="description"onChange={this.handleEvent}/&gt;
                  &lt;/FormGroup&gt;
                &lt;/Form&gt;
              &lt;/div&gt;
            &lt;/ModalBody&gt;
            &lt;ModalFooter&gt;
              &lt;Button color="primary" type="button" onClick={this.bookMeeting()}&gt;Book Meeting&lt;/Button&gt;
              &lt;Button color="secondary" onClick={this.toggle}&gt;Cancel&lt;/Button&gt;
            &lt;/ModalFooter&gt;
          &lt;/Modal&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Appointment;
  </code></pre>
  
  <p>Whenever I change any input fields the <code>bookMeeting()</code> gets called. I've used this similar structure of getting inputs and posting them to my API for the login and register page and haven't encountered any problems like this before. Even clicking the button to launch the modal makes the <code>bookMeeting()</code> function call.</p>