Why cant I access 'this' in this react code? The problem is only in the increment method. The other methods work just fine. Why?

Question

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Counter extends Component {
state = {
count: 1
};
handleIncrement() {
console.log(this.state.count);
}
render() {
return (
<div>
<span className = {this.getBadgeClasses()}>
{this.formatCount()}</span>
<button
onClick={this.handleIncrement}
className = "btn btn-secondary btn-sm"
>
Increment
</button>
</div>
);
}
getBadgeClasses() {
let classes = "badge m-2 badge-";
classes += this.state.count === 0 ? "warning" : "primary";
return classes
}
formatCount(){
let {count} = this.state;
return count === 0 ? 'Zero' : count
}
}

ReactDOM.render(<Counter />, document.getElementById("root"));

Answer 1

I know that beginners learn from tutorials, mostly using class component to build react app, which was the only way to do before react release react hooks. Bear in mind, most tutorials were built before react hooks released.

Nowadays react official advises us to focus on learning react hooks which using functional components.

sajid chowdhury I just rebuilt your counting app using react hooks. You can compare how much better React Hook in writing easy to understand, cleaner code by comparing the 2 methods. React Hooks get rid of the extra 'this', this.state and constructor function which are needed on class functions.

And we do not have lose of context issue on React Hook since we don't have to define components in class.

https://code.sololearn.com/WAYFbLK8m1W6/?ref=app

https://code.sololearn.com/Wdt22iNig4Lu/?ref=app

Answer 2

The reason why the event method need to be reassigned with bind(this) in the constructor is because of the event would lose its context when it's invoked.

If you don't like to use bind method, arrow function can also help assignment of current context to the event method.
Eg.
<button onClick={ ()=>this.handleIncrememt } ....>

Answer 3

sajid The purpose of the bind() method is to set the parent class so that 'this' keyword can know which class to refer to. So .bind(this) means, you are referring to the same class. And hence later, when you'll use 'this' keyword to call a method, it will know it's parent class and work properly.

Method in a react component won't work as long as you don't 'bind' them. There are few ways to 'bind' methods in a component. You can check the main react documentation too regarding 'binding'. Calviղ showed one way already. You can also bind the method when you call it. Like so :

<span className={this.getBadgeClasses()}>
{this.formatCount.bind(this)}</span>

Another thing you can do is to use the arrow function when defining the method.

const formatCount = () => {
// code
}

Answer 4

Calviղ explained it very well so i'll just drop some home reading resources 😬

https://reactjs.org/docs/handling-events.html

Which provides the following link:

https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/

Answer 5

They didn't add parentheses so the function is not called inmediately

They explained the "this" issue as well:

"
You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.
This is not React-specific behavior; it is a part of how functions work in JavaScript. Generally, if you refer to a method without () after it, such as onClick={this.handleClick}, you should bind that method.
"

I wouldn't say it's the best resource to learn from.

There are plenty of resources you can find, but the quality of them is sometimes hard to determine (especially when you are starting to learn).

Most of them are made by people like you and me that just want to pass some knowledge along.

Answer 6

👌

Answer 7

Move state into constructor, and also bind all methods with this in constructor as well.

constructor(props) {
super(props);
this.state = { count: 0 };
this.handleIncrement = this.handleIncrement.bind(this);
this.formatCount = this.formatCount.bind(this);
this.getBadgeClasses = this.getBadgeClasses.bind(this);
}

Answer 8

Arb Rahim Badsa only the handle increment method didn't work. All methods do not need to binded. You're probably wrong about this. I perhaps should have mentioned the line. I will do it now.

Answer 9

sajid chowdhury Lol, I ain't wrong either. Those are the ways that react recommends. But I think you forgot to add '()' after the handleIncrement method. Perhaps this could be the reason. Lol

Answer 10

sajid chowdhury Maybe because it doesn’t know it’s parent 🤷‍♀ Let's mention Burey sir.

Answer 11

Your call to handleIncrement is happening only when a window event is targeted, in this case, the button click, so 'this' refers to the window object. There are 2 ways to prevent this normal behaviour in react. You can call 'super()' in the constructor and explicitly do the bindings for every method or you can simply use arrow functions like that :
handleIncrement = () => console.log(this.state.count)

Answer 12

Calviղ I asked why it's not working. I didn't ask for the solution

Answer 13

Arb Rahim Badsa no, I didn't use () because I'm not calling the method. I'm simply passing the method as a reference.

Answer 14

sajid chowdhury And I guess that is why you need to bind 🤔.

Answer 15

Arb Rahim Badsa but why does passing a method as a reference require it to bind?

Answer 16

Burey sir could you please help a bit?

Answer 17

Calviղ I guess it was released recently. I was following a 1 year old tutorial from mosh and I really want to complete it. So, should I because it doesn't use react hooks? I understood now. Basically this behaves differently depending on how the function is called. If the method is called on an object, this refers to the current object. If it's called as a stand alone function, this refers to the window object or undefined if in strict mode. Thanks for your explanation.

Answer 18

Burey I just saw the documentation. And I'm think why they didn't they explain why removed parentheses from here:
<button onClick={activateLasers}> Activate Lasers </button>
Is this the best resource for learning react?

Answer 19

Burey Thank you very much. It helps a lot.