I need to convert an arrow function into a function. This is due to a problem with Slick Slider, as it does not support properly arrow functions.
I have convert this:
beforeChange={(current, next) => this.setState({slideIndex: next})}
Into this:
beforeChange={function(current, next) {
this.setState({slideIndex: next});
}}
But does not work. Already tried this solution:
beforeChange={function(current, next) {
this.setState(function() {
return {slideIndex: next};
});
}}
Use bind for passing the context to the function:
beforeChange={function(current, next) {
this.setState({slideIndex: next});
}.bind(this)}
This will pass this to the function so that when referencing this inside the function will be the one passed through bind.
Arrow functions do this automatically, they pass the context of where they're being called to the function itself, so by removing the arrow function you removed the correct context.
Other functions that will allow you to manually pass the context are: apply, call and the aforementioned bind.
thisscope is wrong. When using arrow function (=>)thisremains, but when usingfunction(){},thishas it's own scope, sothis.setState()will not work, unless you bind the function with...}.bind(this)