title: How to get values from child components in React
body: <p>So I am just starting to use React and am having trouble gathering the input values of inputs within a child component. Basically, I am creating different components for a large form I am making, then in the encompassing component, I want to collect all the values of inputs on the children in an object I am calling data, and then send that collected input into a POST AJAX request (you can see an example in the last component I made). I can pull the values easily enough when I am inside of the components, but pulling them from the parent component I haven't figured out.</p>
  
  <p>Thanks in advance. Just going through the pains right now with React so any recommendations on how to structure this better as well, I am all ears!</p>
  
  <p>Here are my components:</p>
  
  <p>Component one</p>
  
  <pre><code>var StepOne = React.createClass({
    getInitialState: function() {
      return {title: '', address: '', location: ''};
    },
    titleChange: function(e) {
      this.setState({title: e.target.value});
    },
    addressChange: function(e) {
     this.setState({address: e.target.value});
    },
    locationChange: function(e) {
      this.setState({location: e.target.value});
    },
    render: function() {
      return (
        &lt;div className="stepOne"&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;label&gt;Title&lt;/label&gt;
              &lt;input type="text" value={this.state.title} onChange={this.titleChange} /&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;label&gt;Address&lt;/label&gt;
              &lt;input type="text" value={this.state.address} onChange={this.addressChange} /&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;label&gt;Location&lt;/label&gt;
              &lt;input id="location" type="text" value={this.state.location} onChange={this.locationChange} /&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }, // render
  }); // end of component
  </code></pre>
  
  <p>Component two</p>
  
  <pre><code>var StepTwo = React.createClass({
    getInitialState: function() {
      return {name: '', quantity: '', price: ''}
    },
    nameChange: function(e) {
      this.setState({name: e.target.value});
    },
    quantityChange: function(e) {
      this.setState({quantity: e.target.value});
    },
    priceChange: function(e) {
      this.setState({price: e.target.value});
    },
    render: function() {
      return (
        &lt;div&gt;
        &lt;div className="name-section"&gt;
          &lt;div className="add"&gt;
            &lt;ul&gt;
              &lt;li&gt;
                &lt;label&gt;Ticket Name&lt;/label&gt;
                &lt;input id="name" type="text" value={this.state.ticket_name} onChange={this.nameChange} /&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;label&gt;Quantity Available&lt;/label&gt;
                &lt;input id="quantity" type="number" value={this.state.quantity} onChange={this.quantityChange} /&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;label&gt;Price&lt;/label&gt;
                &lt;input id="price" type="number" value={this.state.price} onChange={this.priceChange} /&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  });
  </code></pre>
  
  <p>Final component to collect data and submit ajax request</p>
  
  <pre><code>EventCreation = React.createClass({
   getInitialState: function(){
    return {}
  },
  submit: function (e){
    var self
  
    e.preventDefault()
    self = this
  
    var data = {
      // I want to be able to collect the values into this object then send it in the ajax request. I thought this sort of thing would work below:
      title: this.state.title,
    }
  
    // Submit form via jQuery/AJAX
    $.ajax({
      type: 'POST',
      url: '/some/url',
      data: data
    })
    .done(function(data) {
      self.clearForm()
    })
    .fail(function(jqXhr) {
      console.log('failed to register');
    });
  },
  render: function() {
      return(
        &lt;form&gt;
          &lt;StepOne /&gt;
          &lt;StepTwo /&gt;
          // submit button here
        &lt;/form&gt;
      );
    }
  });
  </code></pre>