CODEWITHSUNDEEP
javascriptreactjsopenlayerssetstate
Stephen
Stephen

Reputation: 1183

Openlayers setState on Select event

I am trying to trigger a React setState when a feature is clicked. I try to edit the selectedFeature and show it's properties on the screen. But I get a "TypeError: Cannot read property 'setState' of undefined" Error message every time i try to execute the click method.

componentDidMount() {
    ...

    function featureSelected(event) {
      console.log(event.selected[0].getProperties());
      this.setState({ selectedFeature: event.selected[0].getProperties() });
    }

    var changeInteraction = function() {
      var select = new Select({});
      select.on("select", event => featureSelected(event));
      map.addInteraction(select);
    };

    ...
}

This is the line that throws the error:

 this.setState({ selectedFeature: event.selected[0].getProperties() });

This is my state property:

class MyMap extends Component {
  state = {
    selectedFeature: null
  };
...

Upvotes: 1

Views: 543

Answers (2)

Andrea
Andrea

Reputation: 1316

The problem is a misconception of this

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

Basically this refers to the closest function parent. In your case this refers to featureSelected. Try creating a reference to the this that you need, by storing it into a variable.

componentDidMount() {
    ...
    const myClass=this; //Reference to the above class
    function featureSelected(event) {
      console.log(event.selected[0].getProperties());
      //Use that reference instead of this
      myClass.setState({ selectedFeature: event.selected[0].getProperties() });
    }

    var changeInteraction = function() {
      var select = new Select({});
      select.on("select", event => featureSelected(event));
      map.addInteraction(select);
    };

    ...
}

Upvotes: 0

Joe Lloyd
Joe Lloyd

Reputation: 22513

This is undefined

Use fat arrow function instead of the function keyword. You add a new scope when you add a function. this becomes the this of the function and not of the class anymore.

A fat arrow function passes the scope of this down and will allow you to call class methods like setState.

componentDidMount() {
    ...

    const featureSelected = (event) => {
      console.log(event.selected[0].getProperties());
      this.setState({ selectedFeature: event.selected[0].getProperties() });
    }

    var changeInteraction = () => {
      var select = new Select({});
      select.on("select", event => featureSelected(event));
      map.addInteraction(select);
    };

    ...
}

Upvotes: 2

Related Questions