Why does arrow function work but regular function does not React JS

user_17716868 0
Viewed 225

here is my code:

import React from 'react';

export default class MovieCard extends React.Component {
  constructor(props) {
    super(props);
    this.state = { content: 'test' };
  }

  changer = () => {
    this.setState({ content: 'changed' });
  };

  //   changer() {
  //     this.setState({ content: 'changed' });
  //   }
  render() {
    return (
      <div>
        <h1>{this.state.content}</h1>
        <button onClick={this.changer}>click me to change</button>
      </div>
    );
  }
}

The regular function (I commented it out) should do the same but it does not work, while the arrow function work and change the state of the h1 element.

why is that? what is the problem?

arrow-functions reactjs
3 Answers

Because 'this' value in arrow function is the same 'this' value of its parent scope. 'this' value in regular function in class is defined in run time and it's gonna be the instance which called the Class.

user_154054540

You need to bind this if you are going to use them. Arrow functions do not need binding because arrow function does not have the following in its context:

  • this

  • arguments

  • super

  • new.target

    constructor(props) {
  super(props);
  this.state = { content: "test" };
  this.changer = this.changer.bind(this);
}

changer() {
  this.setState({ content: "changed" });
}
render() {
  return (
    <div>
      <h1>{this.state.content}</h1>
      <button onClick={this.changer}>click me to change</button>
    </div>
  );
}
user_125365250

You need to bind this in order to work.

import React from 'react';

export default class MovieCard extends React.Component {
  constructor(props) {
    super(props);
    this.state = { content: 'test' };
  }

  changer() {
    this.setState({ content: 'changed' });
  }
  render() {
    return (
      <div>
        <h1>{this.state.content}</h1>
        <button onClick={this.changer.bind(this)}>click me to change</button>
      </div>
    );
  }
}
user_177743780
Related