CODEWITHSUNDEEP
javascriptloopsreactjsonclickarguments
Mar
Mar

Reputation: 1129

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

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?

Upvotes: 0

Views: 401

Answers (1)

Petter
Petter

Reputation: 1337

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.

Upvotes: 1

Related Questions