React-Bootstrap Modal form entry
<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>