title: Handling callbacks for multiple component instances
body: <p>Just starting out with React, trying to replace a functional, though very complex, jQuery page. I'm undertaking this task because there's additional functionality I need to add and to continue using the tangled web of jQuery is going to become untenable.</p>
  
  <p>This page is an order form of sorts, with several destinations and tasks related to the destinations. Everything I've read about React is telling me to hold state at the highest containing level, essentially my OrderCreation/App level - right?</p>
  
  <p>So, now I have a DestinationInput component that handles GoogleAutocomplete through a mixin and has a toggleable edit state (after a autocomplete place is selected, it becomes a pair of h4/h6 nodes - clicking this will swap back to the input field).</p>
  
  <p>I have a few of these DestinationInput components in the same App – I'd prefer not to have 1 destinationUpdated callback per DestinationInput component instance - especially as this will become a dynamic number of instances overtime.</p>
  
  <p>I assume the proper way is to pass down a generic callback method prop to the children and have the children passback an identifier as well as the new value to the parent. Do I use keys? refs? I don't really see any best practices about how to handle multiple child instances updating parent state.</p>
  
  <p>What I'm thinking should work</p>
  
  <pre><code>var OrderCreate = React.createClass({
     getIntitialState = function () {
        return {
           destinations: []
        }
     },
  
     updateDestination = function(id, place) {
        this.setState(destinations[id], place);
     },
  
     render = function() {
        return (
           for (var i=0; i &lt; this.state.destinations.length; i++) {
              &lt;DestinationInput key={ i }
                                place={this.state.destinations[i]} 
                                onChange={this.updateLocation} /&gt;
           };
        );
     }
  });
  
  var DestinationInput = React.createClass({
     mixins = [GoogleAutocompleteMixin],
     getIntitialState = function () {
        return {
           text: this.props.text
        };
     },
  
     getDefaultProps = function() {
        return {
            text: ""
        };
     },
  
     handleChange = function(event) {
         this.setState({text: event.target.value });
     },
  
     placeSelected = function(place) {
        this.props.onChange(this.props.key, place);
     },
  
     render = function() {
        return (
            &lt;input onChange={ this.handleChange } value={ this.state.text } /&gt;
        );
     }
  });
  </code></pre>