React loop through object and render div with onClick function which takes argument

Question

So I created a loop which goes through an object created by googles gecoding api. Finds certain values and than puts them into a "results list", the single elements have onClick functions. Now when I do the onClick functions with bind, they do work, when I do them with () => they don't. Maybe someone can explain to me why that doesn't work?

loop:

renderResults: function(){
  var status = this.state.data.status;
  var results = this.state.data.results;
  var ok = (status === 'OK' ? true : false);

  if (!status) {
    return <div> </div>
  } 
  if (!ok) {
    return <div className="searchresults">Error, we couldn't find a match</div>
  }

  if (status && ok){
    var size = Object.keys(results).length

    console.log(this.state.data);
    var validation_messages = this.state.data.results;
    ///* Get properties *///
    var resul =[];
    for (var key in validation_messages) {
      console.log("####### " + key + " #######");
      // skip loop i the property is from prototype
      if (!validation_messages.hasOwnProperty(key)) continue;

      var label1 = '';
      var label2 = '';

      var obj = validation_messages[key];
      console.log(obj);
      for (var prop2 in obj.address_components) {
        if(!obj.address_components.hasOwnProperty(prop2)) continue;
        var obj3 = obj.address_components[prop2];
        if (obj3.types.indexOf('locality') !== -1) {
          label1 = obj3.long_name;
        }
        if (obj3.types.indexOf('country') !== -1) {
          label2 = obj3.long_name;
        }
    }
    var lat = obj.geometry.location.lat;
    var lng = obj.geometry.location.lng;
    var placeid = obj.place_id;
    var label3 = lat.toFixed(3) + "°N / " + lng.toFixed(3)  + "°E";

    console.log('label1: '+label1);
    console.log('label2: '+label2);
    console.log('label3: '+label3);
    console.log('lat: ' + lat);
    console.log('lng: ' + lng);
    console.log('id: ' + placeid);
    console.log(validation_messages[key].formatted_address);


    resul.push(<div className="results" onClick={this.pushlabels.bind(this, label1, label2, label3)} >{label3}</div>);

  }
  console.log(resul);
  return resul;

}

So this works:

resul.push(<div className="results" onClick={this.pushlabels.bind(this, label1, label2, label3)} >{label3}</div>);

This doesn't work:

resul.push(<div className="results" onClick={() => this.pushlabels(label1,label2,label3)} >{label3}</div>);

What do I mean with not working? If I take the version which doesn't work than I get only pushed the label1, label2, label3 from the last object in the loop.

So now I wonder why?

score 1 · Accepted Answer · edited May 23 '17 at 12:22

It has to do with variable scoop and closures, for a similar problem have a look at javascript scope problem when lambda function refers to a variable in enclosing loop

Here's a short and simple program that illustrates what happens:

function foo(first, second){
 console.log(first + " : " + second)
}
var x = "x";
let bar = () => {foo("bar", x)}
let baz = foo.bind(this,"baz", x)
bar()
baz()
x = "y"
bar()
baz()

//Output:
//bar : x
//baz : x
//bar : y
//baz : x

So basically bind makes the function remember (it actually returns a new function with the parameters set) the current state of the variables. Where as a lamda looks at the variables when it's executed. That's why you only see the last three labels when you don't use bind.

React loop through object and render div with onClick function which takes argument

1 Answers1