CODEWITHSUNDEEP
reactjs
Thomas Segato
Thomas Segato

Reputation: 5223

Class variables in REACT

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;

Upvotes: 0

Views: 237

Answers (2)

Isaac
Isaac

Reputation: 12874

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.

Upvotes: 3

ROOT
ROOT

Reputation: 11622

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.

Upvotes: 4

Related Questions