title: How to get the value from FormControl with React-Bootstrap in Meteor
body: <p>I'm using react-bootstrap in my current Meteor project. I can't seem to get this form to work. What am I doing wrong? I can't seem to be able to read the value of the FormControl input.</p>
  
  <p>At the moment I am getting this error: 
  "imports/ui/components/add-spark.js:35:61: Unexpected token (35:61)"</p>
  
  <p>Also my modal doesn't work anymore when I add 'ref="city"' to FormControl.
  Then I get this error: "Uncaught Invariant Violation: Stateless function components cannot have refs"</p>
  
  <p>UPDATE: 
  I have managed to get the ref in my modal working. But still I can't get the value from the form. 
  I ofcourse forgot to make it a class object which caused a lot of the problems. Now I am getting a different error though:</p>
  
  <p>"Uncaught TypeError: Cannot read property 'cityInput' of undefined"</p>
  
  <p>When I try to add my function like this:   </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>&lt;form onSubmit={ this.handleInsertSpark.bind(this) }&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My modal won't work anymore. I then get this error code:
  "add-spark.js:53 Uncaught TypeError: Cannot read property 'bind' of undefined(…)"</p>
  
  <p>This is my current code:</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>const handleInsertSpark = (event) =&gt; {
    event.preventDefault();
  
    var city = ReactDOM.findDOMNode(this.refs.cityInput).value
    console.log(city);
  
  };
  
  function FieldGroup({ id, label, help, ...props }) {
    return (
      &lt;FormGroup controlId={id}&gt;
        &lt;ControlLabel&gt;{label}&lt;/ControlLabel&gt;
        &lt;FormControl {...props} /&gt;
        {help &amp;&amp; &lt;HelpBlock&gt;{help}&lt;/HelpBlock&gt;}
      &lt;/FormGroup&gt;
    );
  }
  
  export default class AddSpark extends Component {
    render() {
      return (&lt;div&gt;
    &lt;form onSubmit={ handleInsertSpark }&gt;
      &lt;FormGroup controlId="formControlsCity"&gt;
        &lt;ControlLabel&gt;Select your city&lt;/ControlLabel&gt;
        &lt;FormControl componentClass="select" placeholder="Choose your city" ref="cityInput" onClick={ moreOptions }&gt;
          &lt;option value="select"&gt;Choose your city&lt;/option&gt;
          &lt;option value="0"&gt;Beijing&lt;/option&gt;
          &lt;option value="1"&gt;Shanghai&lt;/option&gt;
          &lt;option value="2"&gt;Chengdu &amp; Chongqing&lt;/option&gt;
        &lt;/FormControl&gt;
      &lt;/FormGroup&gt;
  
  &lt;FormGroup controlId="formControlsPerson"&gt;
        &lt;ControlLabel&gt;Select your person&lt;/ControlLabel&gt;
        &lt;FormControl componentClass="select" placeholder="Choose your person"&gt;
          &lt;option value="select"&gt;First select your city&lt;/option&gt;
        &lt;/FormControl&gt;
      &lt;/FormGroup&gt;
  
  &lt;FormGroup controlId="formControlsLocation"&gt;
        &lt;ControlLabel&gt;Select your location&lt;/ControlLabel&gt;
        &lt;FormControl componentClass="select" placeholder="Choose your location"&gt;
          &lt;option value="select"&gt;First select your city&lt;/option&gt;
        &lt;/FormControl&gt;
      &lt;/FormGroup&gt;
  
  
      &lt;FieldGroup
        id="formControlsText"
        type="text"
        label="Title"
        placeholder="Enter your title"
      /&gt;
      
      &lt;FormGroup controlId="formControlsTextarea"&gt;
        &lt;ControlLabel&gt;Content&lt;/ControlLabel&gt;
        &lt;FormControl componentClass="textarea" placeholder="textarea" /&gt;
      &lt;/FormGroup&gt;
  
      &lt;div className="upload-area"&gt;
          &lt;p className="alert alert-success text-center"&gt;
            &lt;span&gt;Click or Drag an Image Here to Upload&lt;/span&gt;
            &lt;input type="file" onChange={this.uploadFile} /&gt;
          &lt;/p&gt;
      &lt;/div&gt;
  
      &lt;Button
        type="submit"&gt;
        Submit
      &lt;/Button&gt;
    &lt;/form&gt;
    &lt;/div&gt;
    )}
    }</code></pre>
  </div>
  </div>
  </p>