title: Unable to get form values in React-Bootstrap's Formgroup Component
body: <p>I am using React-Bootstrap and I want to get the values of an input form so that I can save them to Firebase. Before using React-Bootstrap, I was able to grab the value of an input and the text area by using <code>ref, but now I am not able to do that after using</code>FormGroups`. Upon submitting the form, I am unable to grab the values from the input and the text area.</p>
  
  <p>I've seen previous post concerning this problem, but it seems none these solutions actually work.</p>
  
  <p>I am new to React. Can someone please explain to me how to grab form values from using Formgroups? 
  <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>import React from 'react'
  import ReactDOM from 'react-dom'
  import {withRouter} from 'react-router'
  import './NewListPage.css'
  import Header from './Header'
  import ListItem from './ListItem'
  import database from '../database'
  import Form from './Form'
  import {
    Button,
    FormGroup,
    FormControl,
    Feedback,
    ControlLabel
  } from 'react-bootstrap';
  
  class NewListPage extends React.Component {
    // bring props into constructor
    constructor(props) {
      // bring props into super
      super(props)
      //create list uuid this needs to be A better uuid genereator in the future
      const listId = Math.floor((Math.random() * 10000) + 1)
      this.state = {
        wishList: {
          items: []
        },
        wishListItems: []
      }
      this.addListItem = this.addListItem.bind(this) //bind the add list item function to this component
      this.removeListItem = this.removeListItem.bind(this) //needed to bind update order to root class
      this.saveListItem = this.saveListItem.bind(this) //bind to root class
    }
  
    addListItem(e) { //add another item to the array
      e.preventDefault()
      // never change state directly, make a copy instead
      const wishList = Object.assign({}, this.state.wishList)
      //push a new item to items object
      wishList.items.push({title: 'title', description: 'description'})
      this.setState({
        //update the state
        wishList
      })
    }
  
    // remove items from array
    removeListItem(index) {
      // never change state directly, make a copy instead
      const wishList = Object.assign({}, this.state.wishList)
      //remove item object from items array using its index
      wishList.items.splice([index], 1)
      this.setState({
        //update the state from the new array
        wishList
      })
    }
  
    // save list item into dB
    saveListItem(event) {
      // upon submit, prevent whole page from refreshing
      event.preventDefault()
      // never change state directly, make a copy instead
      const wishList = Object.assign({}, this.state.wishList)
      // grab the title
      wishList.title = this.refs.title.value
      // grab the description
      wishList.description = this.refs.description.value
      // for each item in the list grab its properties
      wishList.items.map((item, index) =&gt; {
        // grab descritions and title from generated form
        item.description = this.refs.list.children[index].children.itemdescription.value
        item.title = this.refs.list.children[index].children.itemtitle.value
      })
      // push the wishlist to firebase (need to add code to handle errors.)
      // we use push so that firebase will generate its own uuid
      database.push('wishLists', {
        data: wishList
        // if it saves then resolve this promise and push the uuid to users/uid/wishLists
      }).then(newList =&gt; {
        database.push(`users/${this.props.currentUser.uid}/wishLists`, {
          // newList.key contains the firebase uuid from the previous push
          data: newList.key
          // if this also saves then redirect
        }).then(finished =&gt; {
          //redirect to dashboard
          this.props.history.push('/')
        })
      })
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;h1&gt;Create a New Wishlist&lt;/h1&gt;
          &lt;div className="ListForm"&gt;
            &lt;Row&gt;
              &lt;Col sm={3}/&gt;
              &lt;Col sm={6}&gt;
                &lt;form onSubmit={this.saveListItem.bind(this)}&gt;
                  &lt;FormGroup&gt;
                    &lt;ControlLabel&gt;Wishlist Title&lt;/ControlLabel&gt;
                    &lt;br/&gt;
                    &lt;FormControl type="text" name="title"  ref="title" required="true" placeholder="Enter text"/&gt;
                    &lt;FormControl.Feedback/&gt;
                    &lt;br/&gt;
                    &lt;FormGroup controlId="formControlsTextarea"&gt;
                      &lt;ControlLabel&gt;Wishlist Description Optional&lt;/ControlLabel&gt;
                      &lt;FormControl componentClass="textarea" placeholder="textarea" name="description" ref="description"/&gt;
                    &lt;/FormGroup&gt;
                    &lt;br/&gt;
  
                    &lt;div className="ListItems" ref="list"&gt;
                      {this.state.wishList.items.map((item, index) =&gt; {
                        return &lt;ListItem removeListItem={this.removeListItem} myIndex={index} key={index}/&gt;
                      })}
                    &lt;/div&gt;
                    &lt;Button bsStyle="primary" type="button" onClick={this.addListItem}&gt;ADD ITEM&lt;/Button&gt;&lt;br/&gt;&lt;br/&gt;
                    &lt;input type="submit" value="Save List" ref="save"/&gt;
                  &lt;/FormGroup&gt;
                &lt;/form&gt;
              &lt;/Col&gt;
            &lt;/Row&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  // export with router
  export default withRouter(NewListPage)</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the error message from the window console log.</p>
  
  <ul>
  <li><ul>
  <li><ul>
  <li><a href="https://i.stack.imgur.com/AWHZJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/AWHZJ.png" alt="enter image description here"></a></li>
  </ul></li>
  </ul></li>
  </ul>