How to get values from child components in React
<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>