How to use functions in react class components?
Tags: react, class, javascript, beginners
Published: 2024-01-18 07:42:38

I know how you felt when you first saw this title, trust me, i know what were you thinking?

Are you joking? Use function?

That's too easy, right? const addition= () => {}
And then use it, just make it?

But, but, for beginners, I believe there will be some problems that you will meet

**Now,there is a requirement. Every time the number is clicked, the number will increase by 1.**

## Bad use case ❌

### 1.The addNum will not take effect, and also has this error message
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/da4pgm9rync97l2l55c3.jpg)
```react
import React, { PureComponent } from "react";

export default class Demo extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      num: 0,
    };
  }

  addNum() {
    const { num } = this.state;
    this.setState({
      num: num + 1,
    });
  }

  render() {
    return (
      // Use addNum method directly 
      <div onClick={this.addNum}>
        <div>add</div>
        <div>{this.state.num}</div>
      </div>
    );
  }
}

```

### 2.The page will crash when use this method 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fpy2gw34ju3d5tbbby5m.jpg)
```react
import React, { PureComponent } from "react";
export default class Demo extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      num: 0,
    };
  }

  addNum() {
    const { num } = this.state;
    this.setState({
      num: num + 1,
    });
  }

  render() {
    return (
      // Use addNum method directly 
      <div onClick={this.addNum()}>
        <div>add</div>
        <div>{this.state.num}</div>
      </div>
    );
  }
}

```
## Good use case ✔

### 1.Use arrow function calls
 
```react
import React, { PureComponent } from "react";

export default class Demo extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      num: 0,
    };
  }

  addNum() {
    const { num } = this.state;
    this.setState({
      num: num + 1,
    });
  }

  render() {
    return (
      <div
        onClick={() => {
          this.addNum();
        }}
      >
        <div>add</div>
        <div>{this.state.num}</div>
      </div>
    );
  }
}
```
### 2.Declare addNum method using arrow function
 
```react
import React, { PureComponent } from "react";
export default class Demo extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      num: 0,
    };
  }

  addNum = () => {
    const { num } = this.state;
    this.setState({
      num: num + 1,
    });
  };

  render() {
    return (
      <div onClick={this.addNum}>
        <div>add</div>
        <div>{this.state.num}</div>
      </div>
    );
  }
}
```
### 3.Bind this
 
```react
import React, { PureComponent } from "react";
export default class Demo extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      num: 0,
    };
    this.addNum = this.addNum.bind(this);
  }

  addNum() {
    const { num } = this.state;
    this.setState({
      num: num + 1,
    });
  }

  render() {
    return (
      <div onClick={this.addNum}>
        <div>add</div>
        <div>{this.state.num}</div>
      </div>
    );
  }
}
```

**Or you can upgrade react version to 16.8, then use hooks 😂
Because we need to consider this pointer problem in class component, i hate this，that is a devil!!!!!**

**Then you never need to consider this when you use hooks function component ❤**