Have the following simpliest component.
class App extends Component {
constructor(props) {
super(props);
console.log(this);
this.state = {
name: "John"
}
}
clickHandler() {
this.setState({
name: "Mark"
})
};
render() {
return (
<div className="App">
{this.state.name}
<button onClick={this.clickHandler.bind(this)}></button>
</div>
)
};
}
export default App;
If I write that
<button onClick={this.clickHandler}></button>
it says that this in
this.setState({
name: "Mark"
})
is undefined.
That row
<button onClick={console.log(this)}></button>
shows that this is App.
So if this is App why clickHandler does not bind automatically to that object before the dot?
<button onClick={this.clickHandler}></button>
As far as I understand in “context.function” the context should be bound to the function. Or it only works for “context.function()”?