Class variables in REACT

Question

Does class variables in a class need to be a part of the stateObject? I tried below with no luck. Here there is samples with simple variables so I am kind of surprice below does not work (alert says undefined)?

https://www.w3schools.com/react/react_es6.asp

https://codesandbox.io/s/jovial-glade-lfv4f?fontsize=14&hidenavigation=1&theme=dark

import React, { Component } from "react";

class Test extends Component {
  constructor(props) {
    super(props);
    this.variable = "works";
  }

  clicked() {
    alert(this.variable);
  }

  render() {
    return <div onClick={this.clicked}>CLICK ME</div>;
  }
}

export default Test;

Try to use arrow function clicked = () => { ... }

ravibagul91
– ravibagul91

2020-01-09 08:08:03 +00:00
Commented Jan 9, 2020 at 8:08 — ravibagul91
– ravibagul91, Commented Jan 9, 2020 at 8:08

ROOT · Accepted Answer · 2020-01-09 07:58:54Z

4

You need to use bind() call to make it work.

constructor(props) {
  super(props);
  this.variable = "works";
  this.clicked = this.clicked.bind(this);
}

for more information on this checkout Handling events in React

Why you have to bind here? so this is because you are using ES6 syntax for your components, and in ES6 class methods are not bound to classes by default, and to be able to use this keyword inside your methods and make it refer to the class instance you have bind your method to the class like in this answer.

edited Jan 9, 2020 at 7:58

answered Jan 9, 2020 at 7:47

ROOT

11.7k5 gold badges35 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thomas Segato Over a year ago

Kind of strange your binding the event. The event actually works. Is it because you need to bind events before you can use local variables within them?

ROOT Over a year ago

I added more explanation in my answer.

ravibagul91 · Accepted Answer · 2020-01-09 08:08:42Z

3

import React, { Component } from "react";

class Test extends Component {
  constructor(props) {
    super(props);
    this.variable = "works";
  }

  clicked = () => {
    alert(this.variable);
  }

  render() {
    return <div onClick={this.clicked}>CLICK ME</div>;
  }
}

export default Test;

You can choose not to bind but you need to be adding fat-arrow function syntax in order to make it work.

edited Jan 9, 2020 at 8:08

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

answered Jan 9, 2020 at 7:55

Isaac

13k18 gold badges66 silver badges135 bronze badges

3 Comments

Oner T. Over a year ago

it is not working codesandbox.io/s/polished-shadow-mdtv2

Oner T. Over a year ago

ah ok now works. So it is not about fat-arrow func or bind, just using arrow function is ok

Thomas Segato Over a year ago

Thanks for your input, appreciated.

Collectives™ on Stack Overflow

Class variables in REACT

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related