title: Unable to add data from form to variable using REACT
body: <p>We're trying to set up a data entry form that adds input to an object in mongo. We're positive this has to do with our front end as we can't get the input data to even print to an alert.</p>
  
  <pre><code>import { Panel, Button,ButtonToolbar} from 'react-bootstrap';
  
  export default class ResearcherPortal extends React.Component {
  
      constructor(props){
          super(props);
          this.state = {
              schoolName: '',
              studyName: '',
              studyDescription: '',
              identifier: '',
              numberOfConsenting: null,
              numberOfNonconsenting: null
          },
  
          this.handleSubmit = this.handleSubmit.bind(this);
      }
      handleSubmit(event){
          this.setState({numberOfConsenting: event.target.value});
          alert(this.state.numberOfConsenting);
      }
      render() {
          return (
              &lt;div className="jumbotron"&gt;
                  &lt;div className="container "&gt;
                      &lt;div className ="row justify-content-md-center"&gt;
                          &lt;Panel bsStyle="primary"&gt;
                              &lt;Panel.Heading&gt;
                                  &lt;h2&gt;Researcher Portal&lt;/h2&gt;
                              &lt;/Panel.Heading&gt;
                              &lt;Panel.Body&gt;
                                  &lt;form id="Account Creation" action={"/researcherPortal"} method="POST"&gt;
                                      &lt;div className="form-group"&gt;
                                          &lt;input type="text" className="form-control" id="schoolName" placeholder="School Name"/&gt;
                                      &lt;/div&gt;
                                      &lt;div className="form-group"&gt;
                                          &lt;input type="text" className="form-control" id="studyName" placeholder="Study Name"/&gt;
                                      &lt;/div&gt;
                                      &lt;div className="form-group"&gt;
                                          &lt;input type="text" className="form-control" id="studyDescription" placeholder="Study Description"/&gt;
                                      &lt;/div&gt;
                                      &lt;div className="form-group"&gt;
                                          &lt;input type="text" className="form-control" id="identifier" placeholder="Unique Identifier"/&gt;
                                      &lt;/div&gt;
                                      &lt;div className="form-group"&gt;
                                          &lt;input type="text" className="form-control" id="numberOfConsenting" placeholder="Number of Consenting Students" value={this.state.numberOfConsenting}/&gt;
                                      &lt;/div&gt;
                                      &lt;div className="form-group"&gt;
                                          &lt;input type="text" className="form-control" id="numberOfNonconsenting" placeholder="Number of Nonconsenting Students"/&gt;
                                      &lt;/div&gt;
                                      &lt;Button type="submit" className="btn btn-primary" onClick={this.handleSubmit.bind(this)}&gt;Create Accounts&lt;/Button&gt;
                                  &lt;/form&gt;
                              &lt;/Panel.Body&gt;
                          &lt;/Panel&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          );
      }
  }
  </code></pre>
  
  <p>Expected result is the input for "Number of Consenting Students", however we are just outputting the initial constructor value.</p>