title: reactjs updating parent state from child in map function
body: <p>I have two components currently <code>LootBox</code> and <code>LootTable</code>. <code>LootTable</code> is a child of <code>LootBox</code>.</p>
  
  <pre><code>var LootBox = React.createClass({
              loadLootFromServer: function() {
                  $.ajax({
                    url: this.props.url,
                    dataType: 'json',
                    cache: false,
                    success: function(data) {
                      this.setState({data: data});
                    }.bind(this),
                    error: function(xhr, status, err) {
                      console.error(this.props.url, status, err.toString());
                    }.bind(this)
                  });
              },
              loadItemsFromServer: function() {
                  $.ajax({
                    url: this.props.itemData,
                    dataType: 'json',
                    cache: false,
                    success: function(bossData) {
                      this.setState({bossData: bossData, loading: {"done": true}});
                    }.bind(this),
                    error: function(xhr, status, err) {
                      console.error(this.props.itemData, status, err.toString());
                    }.bind(this)
                  });
              },
              handleClick: function(e, slot, item_id, item_bonus) {
                  e.preventDefault();
                  this.state.data.head.id = item_id;
                  this.state.data.head.bonus = item_bonus;
                  this.setState({data: this.state.data});
              },
              getInitialState: function() {
                  return {
                      data: {
                          main_hand: {},
                          off_hand: {},
                          head: {},
                          neck: {},
                          shoulders: {},
                          back: {},
                          chest: {},
                          wrist: {},
                          hands: {},
                          waist: {},
                          legs: {},
                          feet: {},
                          finger1: {},
                          finger2: {},
                          trinket1: {},
                          trinket2: {}
                      },
                      bossData: {
                          main_hand: [],
                          off_hand: [],
                          head: [],
                          neck: [],
                          shoulders: [],
                          back: [],
                          chest: [],
                          wrist: [],
                          hands: [],
                          waist: [],
                          legs: [],
                          feet: [],
                          fingers: [],
                          trinkets: [],
  
                      },
                      loading: {"done": false}
                  };
              },
              componentDidMount: function() {
                  this.loadLootFromServer();
                  this.loadItemsFromServer();
              },
              render: function () {
                  if(this.state.loading.done == false){
                      return (&lt;div id="spin"&gt;&lt;/div&gt;)
                  }
                  else {
                      return (
                          &lt;LootTable data={this.state.data} bossData={this.state.bossData} handleClick={this.handleClick} /&gt;
                      )
                  }
              } 
          });
  
          var LootTable = React.createClass({
              render: function () {
                  return (
                      &lt;div className="table-responsive"&gt;
                          &lt;table className="table table-bordered table-hover"&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Head &lt;a href="#" data-toggle="collapse" data-target="#items_head"&gt;&lt;span className="glyphicon glyphicon-th-list pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/th&gt;
                                  &lt;th&gt;Neck &lt;a href="#" data-toggle="collapse" data-target="#items_neck"&gt;&lt;span className="glyphicon glyphicon-th-list pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/th&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;a href={"http://wowhead.com/item=".concat(this.props.data.head.id, "&amp;bonus=", this.props.data.head.bonus)}&gt;{this.props.data.head.id}&lt;/a&gt;
                                      &lt;div id="items_head" className="collapse"&gt;&lt;h4&gt;Select Replacement Item&lt;/h4&gt;
  
                                          {this.props.bossData.head.map(function(item, i, this.props.handleClick){
                                          return (&lt;div key={"item_"+item.id}&gt;
                                              &lt;a href="#" onClick={this.props.handleClick.bind(null, 'head', item.id, item.bonus)} rel={"item=".concat(item.id, "&amp;bonus=", item.bonus)}&gt;{item.name}&lt;/a&gt;
                                          &lt;/div&gt;);
                                      })}&lt;/div&gt;
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;a href={"http://wowhead.com/item=".concat(this.props.data.neck.id, "&amp;bonus=", this.props.data.neck.bonus)}&gt;{this.props.data.neck.id}&lt;/a&gt;
                                      &lt;div id="items_neck" className="collapse"&gt;&lt;h4&gt;Select Replacement Item&lt;/h4&gt;
                                          {this.props.bossData.neck.map(function(item){
                                          return (&lt;div key={"item_"+item.id}&gt;
                                              &lt;a href="#" rel={"item=".concat(item.id, "&amp;bonus=", item.bonus)}&gt;{item.name}&lt;/a&gt;
                                          &lt;/div&gt;);
                                      })}&lt;/div&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Shoulders &lt;a href="#" data-toggle="collapse" data-target="#items_shoulders"&gt;&lt;span className="glyphicon glyphicon-th-list pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/th&gt;
                                  &lt;th&gt;Chest &lt;a href="#" data-toggle="collapse" data-target="#items_chest"&gt;&lt;span className="glyphicon glyphicon-th-list pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/th&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;a href={"http://wowhead.com/item=".concat(this.props.data.shoulders.id, "&amp;bonus=", this.props.data.shoulders.bonus)}&gt;{this.props.data.shoulders.id}&lt;/a&gt;
                                      &lt;div id="items_shoulders" className="collapse"&gt;&lt;h4&gt;Select Replacement Item&lt;/h4&gt;
                                          {this.props.bossData.shoulders.map(function(item){
                                          return (&lt;div key={"item_"+item.id}&gt;
                                              &lt;a href="#" rel={"item=".concat(item.id, "&amp;bonus=", item.bonus)}&gt;{item.name}&lt;/a&gt;
                                          &lt;/div&gt;);
                                      })}&lt;/div&gt;
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;a href={"http://wowhead.com/item=".concat(this.props.data.chest.id, "&amp;bonus=", this.props.data.chest.bonus)}&gt;{this.props.data.chest.id}&lt;/a&gt;
                                      &lt;div id="items_chest" className="collapse"&gt;&lt;h4&gt;Select Replacement Item&lt;/h4&gt;
                                          {this.props.bossData.chest.map(function(item){
                                          return (&lt;div key={"item_"+item.id}&gt;
                                              &lt;a href="#" rel={"item=".concat(item.id, "&amp;bonus=", item.bonus)}&gt;{item.name}&lt;/a&gt;
                                          &lt;/div&gt;);
                                      })}&lt;/div&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Waist &lt;a href="#" data-toggle="collapse" data-target="#items_waist"&gt;&lt;span className="glyphicon glyphicon-th-list pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/th&gt;
                                  &lt;th&gt;Legs &lt;a href="#" data-toggle="collapse" data-target="#items_legs"&gt;&lt;span className="glyphicon glyphicon-th-list pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/th&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;a href={"http://wowhead.com/item=".concat(this.props.data.waist.id, "&amp;bonus=", this.props.data.waist.bonus)}&gt;{this.props.data.waist.id}&lt;/a&gt;
                                      &lt;div id="items_waist" className="collapse"&gt;&lt;h4&gt;Select Replacement Item&lt;/h4&gt;
                                          {this.props.bossData.waist.map(function(item){
                                          return (&lt;div key={"item_"+item.id}&gt;
                                              &lt;a href="#" rel={"item=".concat(item.id, "&amp;bonus=", item.bonus)}&gt;{item.name}&lt;/a&gt;
                                          &lt;/div&gt;);
                                      })}&lt;/div&gt;
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;a href={"http://wowhead.com/item=".concat(this.props.data.legs.id, "&amp;bonus=", this.props.data.legs.bonus)}&gt;{this.props.data.legs.id}&lt;/a&gt;
                                      &lt;div id="items_legs" className="collapse"&gt;&lt;h4&gt;Select Replacement Item&lt;/h4&gt;
                                          {this.props.bossData.legs.map(function(item){
                                          return (&lt;div key={"item_"+item.id}&gt;
                                              &lt;a href="#" rel={"item=".concat(item.id, "&amp;bonus=", item.bonus)}&gt;{item.name}&lt;/a&gt;
                                          &lt;/div&gt;);
                                      })}&lt;/div&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Feet &lt;a href="#" data-toggle="collapse" data-target="#items_feet"&gt;&lt;span className="glyphicon glyphicon-th-list pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/th&gt;
                                  &lt;th&gt;Wrist &lt;a href="#" data-toggle="collapse" data-target="#items_wrist"&gt;&lt;span className="glyphicon glyphicon-th-list pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/th&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;a href={"http://wowhead.com/item=".concat(this.props.data.feet.id, "&amp;bonus=", this.props.data.feet.bonus)}&gt;{this.props.data.feet.id}&lt;/a&gt;
                                      &lt;div id="items_feet" className="collapse"&gt;&lt;h4&gt;Select Replacement Item&lt;/h4&gt;
                                          {this.props.bossData.feet.map(function(item){
                                          return (&lt;div key={"item_"+item.id}&gt;
                                              &lt;a href="#" rel={"item=".concat(item.id, "&amp;bonus=", item.bonus)}&gt;{item.name}&lt;/a&gt;
                                          &lt;/div&gt;);
                                      })}&lt;/div&gt;
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;a href={"http://wowhead.com/item=".concat(this.props.data.wrist.id, "&amp;bonus=", this.props.data.wrist.bonus)}&gt;{this.props.data.wrist.id}&lt;/a&gt;
                                      &lt;div id="items_wrist" className="collapse"&gt;&lt;h4&gt;Select Replacement Item&lt;/h4&gt;
                                          {this.props.bossData.wrist.map(function(item){
                                          return (&lt;div key={"item_"+item.id}&gt;
                                              &lt;a href="#" rel={"item=".concat(item.id, "&amp;bonus=", item.bonus)}&gt;{item.name}&lt;/a&gt;
                                          &lt;/div&gt;);
                                      })}&lt;/div&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Hands &lt;a href="#" data-toggle="collapse" data-target="#items_hands"&gt;&lt;span className="glyphicon glyphicon-th-list pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/th&gt;
                                  &lt;th&gt;Back &lt;a href="#" data-toggle="collapse" data-target="#items_back"&gt;&lt;span className="glyphicon glyphicon-th-list pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/th&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;a href={"http://wowhead.com/item=".concat(this.props.data.hands.id, "&amp;bonus=", this.props.data.hands.bonus)}&gt;{this.props.data.hands.id}&lt;/a&gt;
                                      &lt;div id="items_hands" className="collapse"&gt;&lt;h4&gt;Select Replacement Item&lt;/h4&gt;
                                          {this.props.bossData.hands.map(function(item){
                                          return (&lt;div key={"item_"+item.id}&gt;
                                              &lt;a href="#" rel={"item=".concat(item.id, "&amp;bonus=", item.bonus)}&gt;{item.name}&lt;/a&gt;
                                          &lt;/div&gt;);
                                      })}&lt;/div&gt;
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;a href={"http://wowhead.com/item=".concat(this.props.data.back.id, "&amp;bonus=", this.props.data.back.bonus)}&gt;{this.props.data.back.id}&lt;/a&gt;
                                      &lt;div id="items_back" className="collapse"&gt;&lt;h4&gt;Select Replacement Item&lt;/h4&gt;
                                          {this.props.bossData.back.map(function(item){
                                          return (&lt;div key={"item_"+item.id}&gt;
                                              &lt;a href="#" rel={"item=".concat(item.id, "&amp;bonus=", item.bonus)}&gt;{item.name}&lt;/a&gt;
                                          &lt;/div&gt;);
                                      })}&lt;/div&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Finger 1 &lt;a href="#" data-toggle="collapse" data-target="#items_finger1"&gt;&lt;span className="glyphicon glyphicon-th-list pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/th&gt;
                                  &lt;th&gt;Finger 2 &lt;a href="#" data-toggle="collapse" data-target="#items_finger2"&gt;&lt;span className="glyphicon glyphicon-th-list pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/th&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;a href={"http://wowhead.com/item=".concat(this.props.data.finger1.id, "&amp;bonus=", this.props.data.finger1.bonus)}&gt;{this.props.data.finger1.id}&lt;/a&gt;
                                      &lt;div id="items_finger1" className="collapse"&gt;&lt;h4&gt;Select Replacement Item&lt;/h4&gt;
                                          {this.props.bossData.fingers.map(function(item){
                                          return (&lt;div key={"item1_"+item.id}&gt;
                                              &lt;a href="#" rel={"item=".concat(item.id, "&amp;bonus=", item.bonus)}&gt;{item.name}&lt;/a&gt;
                                          &lt;/div&gt;);
                                      })}&lt;/div&gt;
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;a href={"http://wowhead.com/item=".concat(this.props.data.finger2.id, "&amp;bonus=", this.props.data.finger2.bonus)}&gt;{this.props.data.finger2.id}&lt;/a&gt;
                                      &lt;div id="items_finger2" className="collapse"&gt;&lt;h4&gt;Select Replacement Item&lt;/h4&gt;
                                          {this.props.bossData.fingers.map(function(item){
                                          return (&lt;div key={"item2_"+item.id}&gt;
                                              &lt;a href="#" rel={"item=".concat(item.id, "&amp;bonus=", item.bonus)}&gt;{item.name}&lt;/a&gt;
                                          &lt;/div&gt;);
                                      })}&lt;/div&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Trinket 1 &lt;a href="#" data-toggle="collapse" data-target="#items_trinket1"&gt;&lt;span className="glyphicon glyphicon-th-list pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/th&gt;
                                  &lt;th&gt;Trinket 2 &lt;a href="#" data-toggle="collapse" data-target="#items_trinket2"&gt;&lt;span className="glyphicon glyphicon-th-list pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/th&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;a href={"http://wowhead.com/item=".concat(this.props.data.trinket1.id, "&amp;bonus=", this.props.data.trinket1.bonus)}&gt;{this.props.data.trinket1.id}&lt;/a&gt;
                                      &lt;div id="items_trinket1" className="collapse"&gt;&lt;h4&gt;Select Replacement Item&lt;/h4&gt;
                                          {this.props.bossData.trinkets.map(function(item){
                                          return (&lt;div key={"item1_"+item.id}&gt;
                                              &lt;a href="#" rel={"item=".concat(item.id, "&amp;bonus=", item.bonus)}&gt;{item.name}&lt;/a&gt;
                                          &lt;/div&gt;);
                                      })}&lt;/div&gt;
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;a href={"http://wowhead.com/item=".concat(this.props.data.trinket2.id, "&amp;bonus=", this.props.data.trinket2.bonus)}&gt;{this.props.data.trinket2.id}&lt;/a&gt;
                                      &lt;div id="items_trinket2" className="collapse"&gt;&lt;h4&gt;Select Replacement Item&lt;/h4&gt;
                                          {this.props.bossData.trinkets.map(function(item){
                                          return (&lt;div key={"item2_"+item.id}&gt;
                                              &lt;a href="#" rel={"item=".concat(item.id, "&amp;bonus=", item.bonus)}&gt;{item.name}&lt;/a&gt;
                                          &lt;/div&gt;);
                                      })}&lt;/div&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Main Hand &lt;a href="#" data-toggle="collapse" data-target="#items_main_hand"&gt;&lt;span className="glyphicon glyphicon-th-list pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/th&gt;
                                  &lt;th&gt;Off Hand &lt;a href="#" data-toggle="collapse" data-target="#items_off_hand"&gt;&lt;span className="glyphicon glyphicon-th-list pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/th&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;a href={"http://wowhead.com/item=".concat(this.props.data.main_hand.id, "&amp;bonus=", this.props.data.main_hand.bonus)}&gt;{this.props.data.main_hand.id}&lt;/a&gt;
                                      &lt;div id="items_main_hand" className="collapse"&gt;&lt;h4&gt;Select Replacement Item&lt;/h4&gt;
                                          {this.props.bossData.main_hand.map(function(item){
                                          return (&lt;div key={"item_"+item.id}&gt;
                                              &lt;a href="#" rel={"item=".concat(item.id, "&amp;bonus=", item.bonus)}&gt;{item.name}&lt;/a&gt;
                                          &lt;/div&gt;);
                                      })}&lt;/div&gt;
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;a href={"http://wowhead.com/item=".concat(this.props.data.off_hand.id, "&amp;bonus=", this.props.data.off_hand.bonus)}&gt;{this.props.data.off_hand.id}&lt;/a&gt;
                                      &lt;div id="items_off_hand" className="collapse"&gt;&lt;h4&gt;Select Replacement Item&lt;/h4&gt;
                                          {this.props.bossData.off_hand.map(function(item){
                                          return (&lt;div key={"item_"+item.id}&gt;
                                              &lt;a href="#" rel={"item=".concat(item.id, "&amp;bonus=", item.bonus)}&gt;{item.name}&lt;/a&gt;
                                          &lt;/div&gt;);
                                      })}&lt;/div&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
                  )
              }
          });
  
          React.render(
              &lt;LootBox url="/loot.json" itemData='/bosses.json' /&gt;,
              document.getElementById('content')
          );
  </code></pre>
  
  <p>Essentially what I'm trying to achieve here, is to change the state of <code>data</code> when a link is clicked within the <code>LootTable</code>.</p>
  
  <p>E.G whenever a user clicks on a link in the <code>{this.props.BossData.head.map(...</code> map. I need it to update <code>this.state.data.head.id</code> and <code>this.state.data.head.bonus</code>.</p>
  
  <p>I've been banging my head against this for hours, and have tried various solutions none of which work.</p>
  
  <p>If i try to bind the <code>this.props.handleClick</code> it tells me can't read property bind of undefined. Anyone any ideas? </p>