title: Passing keys to children in React.js
body: <p>I am running through a react tutorial on tutsplus that is a bit old, and the code doesn't work as it was originally written. I actually am totally ok with this as it forces me to learn more independently, however I have spent a while on a bug that I just can't figure out. The bug consists of not being able to pass on an objects key, which prevents my program from updating the state of the correct object. </p>
  
  <p>First off here is the repo if you want to run this code and see it in action: <a href="https://github.com/camerow/react-voteit" rel="noreferrer">https://github.com/camerow/react-voteit</a></p>
  
  <p>I have a child component that looks like this: </p>
  
  <pre><code>var FeedItem = React.createClass({
  
    vote: function(newCount) {
      console.log("Voting on: ", this.props, " which should have a key associated.");
  
      this.props.onVote({
        key: this.props.key,
        title: this.props.title,
        description: this.props.desc,
        voteCount: newCount
      });
    },
  
    voteUp: function() {
      var count = parseInt(this.props.voteCount, 10);
      var newCount = count + 1;
      this.vote(newCount);
    },
  
    voteDown: function() {
      var count = parseInt(this.props.voteCount, 10);
      var newCount = count - 1;
      this.vote(newCount);
    },
  
    render: function() {
      var positiveNegativeClassName = this.props.voteCount &gt;= 0 ?
                                      'badge badge-success' :
                                      'badge badge-danger';
      return (
        &lt;li key={this.props.key} className="list-group-item"&gt;
          &lt;span className={positiveNegativeClassName}&gt;{this.props.voteCount}&lt;/span&gt;
          &lt;h4&gt;{this.props.title}&lt;/h4&gt;
          &lt;span&gt;{this.props.desc}&lt;/span&gt;
          &lt;span className="pull-right"&gt;
            &lt;button id="up" className="btn btn-sm btn-primary" onClick={this.voteUp}&gt;&amp;uarr;&lt;/button&gt;
            &lt;button id="down" className="btn btn-sm btn-primary" onClick={this.voteDown}&gt;&amp;darr;&lt;/button&gt;
          &lt;/span&gt;
        &lt;/li&gt;
      );
    }
  
  });
  </code></pre>
  
  <p>Now when someone hits the vote button the desired behavior is for the FeedItem.vote() method to send an object up to the main Feed component:</p>
  
  <pre><code>var FeedList = React.createClass({
  
    render: function() {
      var feedItems = this.props.items;
  
      return (
        &lt;div className="container"&gt;
          &lt;ul className="list-group"&gt;
  
            {feedItems.map(function(item) {
              return &lt;FeedItem key={item.key}
                               title={item.title}
                               desc={item.description}
                               voteCount={item.voteCount}
                               onVote={this.props.onVote} /&gt;
            }.bind(this))}
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  
  });
  </code></pre>
  
  <p>Which should pass that key on throught the parent component's onVote function: </p>
  
  <pre><code>var Feed = React.createClass({
  
    getInitialState: function () {
      var FEED_ITEMS = [
        {
          key: 1,
          title: 'JavaScript is fun',
          description: 'Lexical scoping FTW',
          voteCount: 34
        }, {
          key: 2,
          title: 'Realtime data!',
          description: 'Firebase is cool',
          voteCount: 49
        }, {
          key: 3,
          title: 'Coffee makes you awake',
          description: 'Drink responsibly',
          voteCount: 15
        }
      ];
      return {
        items: FEED_ITEMS,
        formDisplayed: false
      }
    },
  
    onToggleForm: function () {
      this.setState({
        formDisplayed: !this.state.formDisplayed
      });
    },
  
    onNewItem: function (newItem) {
      var newItems = this.state.items.concat([newItem]);
      // console.log("Creating these items: ", newItems);
      this.setState({
        items: newItems,
        formDisplayed: false,
        key: this.state.items.length
      });
    },
  
    onVote: function (newItem) {
      // console.log(item);
  
      var items = _.uniq(this.state.items);
      var index = _.findIndex(items, function (feedItems) {
        // Not getting the correct index.
        console.log("Does ", feedItems.key, " === ", newItem.key, "?");
        return feedItems.key === newItem.key;
      });
      var oldObj = items[index];
      var newItems = _.pull(items, oldObj);
      var newItems = this.state.items.concat([newItem]);
      // newItems.push(item);
      this.setState({
        items: newItems
      });
    },
  
    render: function () {
      return (
        &lt;div&gt;
          &lt;div className="container"&gt;
            &lt;ShowAddButton displayed={this.state.formDisplayed} onToggleForm={this.onToggleForm}/&gt;
          &lt;/div&gt;
          &lt;FeedForm displayed={this.state.formDisplayed} onNewItem={this.onNewItem}/&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;FeedList items={this.state.items} onVote={this.onVote}/&gt;
        &lt;/div&gt;
      );
    }
  
  });
  </code></pre>
  
  <p>My logic relies on being able to reconcile the keys in the onVote function, however the key prop is not being properly passed on. So my question is, how do I pass on they key through this 'one way flow' to my parent component? </p>
  
  <p>Note: Feel free to point out other problems or better design decision, or absolute stupidities. Or even that I'm asking the wrong question. </p>
  
  <p>Looking forward to a nice exploration of this cool framework.</p>