title: React-Bootstrap Modal form entry
body: <p>I currently have a React Bootstrap Modal that when opened, shows a number of Inputs. I want the user to be able to enter values in the Inputs, and then with a 'Save' button, simply to create a JSON object and console log the newly created JSON object.</p>
  
  <pre><code>closeModal(){
      this.setState({
        showModal: false,
      });
  }
  
  openModal(){
      this.setState({
        showModal: true,
      });
  }
  
  saveSandbox(event){
      console.log("Hello World");
      name: this.refs.bundleName.findDOMNode().value;
      console.log(name);
  }
  &lt;Modal show={this.state.showModal} onHide={this.closeModal.bind(this)}&gt;
      &lt;form&gt;
          &lt;Modal.Header closeButton&gt;
              &lt;Modal.Title&gt;Create New&lt;/Modal.Title&gt;
              &lt;Input type="text" ref="bundleName" placeholder="Name" /&gt;
          &lt;/Modal.Header&gt;
          &lt;Modal.Body &gt;
              &lt;h4&gt;Type: &lt;/h4&gt;
  
                  &lt;Input type="select" placeholder="select"&gt;
                      {bundleTypes.map(({type}, index) =&gt;
                          &lt;option value="select"&gt;{type}&lt;/option&gt;
                      )}
                  &lt;/Input&gt;
  
                      &lt;h4&gt;Description: &lt;/h4&gt;
                      &lt;Input type="text" placeholder="Enter text"}/&gt;
                      &lt;hr /&gt;
  
          &lt;/Modal.Body&gt;
          &lt;Modal.Footer&gt;
              &lt;Button onClick={this.saveSandbox.bind(this)} bsStyle="success"&gt;Save&lt;/Button&gt;
              &lt;Button onClick={this.closeModal.bind(this)} &gt;Close&lt;/Button&gt;
          &lt;/Modal.Footer&gt;
      &lt;/form&gt;
  &lt;/Modal&gt;
  </code></pre>
  
  <p>This is my code currently, however when ran in Chrome, it reports that <code>Uncaught TypeError: this.refs.bundleName.findDOMNode is not a function</code></p>
  
  <p>When looking at examples or other questions/answers the suggestions are now deprecated.</p>