When a method is being bound in the React class constructor, how does it view the value of the property being bound, if the constructor is the first thing to run, then when the handleClick property is being bound to the component instance below, how does it know what the value of handleClick will be as it's not defined until after the constructor.
So I'm wondering if the constructor runs first, is it even aware that a method called handleClick has been defined and if so how because it's defined after the constructor?
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
It is called hoisting https://stackabuse.com/hoisting-in-javascript. You can find a bunch of examples in the article that I attached.
what do you mean they would be undefined? when you define a class and implement its methods the class "knows" what attributes and properties it has.
there is something call context execution, for this purpose let's say that it is this in other words, it is the object running in the current scope.
if you have a component like this one.
class Button extend Component {
constructor (props) {
super(props);
}
handler () {
// ...
}
render () {
return (
<button onClick={this.handler} >Click</button>
)
}
}
that creates a button. When user clicks the button it executes the method handler, now let me ask you what is this who is executing handler.
the user? the button? the window?
the onClick is an event listener, it is a reaction triggered by each time the user interacts with the window. so who calls the onClick function is was not the button, but the window. the handler method of the button is none but a wrapper of the original function so the conext is under window thats why when you refer to other stuff of the class button everything is undefined because you are looking for those things in the window object.
this.handler = this.handler.bind(this);
it only specifies who is going to be this, but do not believe me I am just a mortal.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind
what to learn more watch this: https://www.youtube.com/watch?v=Bv_5Zv5c-Ts
It is because of the hoisting, actually it is the specialty of the constructor in the class, you can clear your doubt by understanding the constructor. visit here for easy explanation - 'https://ponyfoo.com/articles/binding-methods-to-class-instance-objects'