I am trying to declare a variable in a react-js class. The variable should be accessible in different functions. This is my code
class MyContainer extends Component {
constructor(props) {
super(props);
this.testVariable= "this is a test"; // I declare the variable here
}
onMove() {
console.log(this.testVariable); //I try to access it here
}
}
On onMove, the value of this.testVariable is undefined. I Know that I could put the value on the state but I don't want to do it because each time the value changes, render() will be called which is not necessary. I am new to react, did I make something wrong?
Using ES6 syntax in React does not bind this to user-defined functions however it will bind this to the component lifecycle methods.
So the function that you declared will not have the same context as the class and trying to access this will not give you what you are expecting.
For getting the context of class you have to bind the context of class to the function or use arrow functions.
Method 1 to bind the context:
class MyContainer extends Component {
constructor(props) {
super(props);
this.onMove = this.onMove.bind(this);
this.testVarible= "this is a test";
}
onMove() {
console.log(this.testVarible);
}
}
Method 2 to bind the context:
class MyContainer extends Component {
constructor(props) {
super(props);
this.testVarible= "this is a test";
}
onMove = () => {
console.log(this.testVarible);
}
}
Method 2 is my preferred way but you are free to choose your own.
Update: You can also create the properties on class without constructor:
class MyContainer extends Component {
testVarible= "this is a test";
onMove = () => {
console.log(this.testVarible);
}
}
Note If you want to update the view as well, you should use state and setState method when you set or change the value.
Example:
class MyContainer extends Component {
state = { testVarible: "this is a test" };
onMove = () => {
console.log(this.state.testVarible);
this.setState({ testVarible: "new value" });
}
}
Assuming that onMove is an event handler, it is likely that its context is something other than the instance of MyContainer, i.e. this points to something different.
You can manually bind the context of the function during the construction of the instance via Function.bind:
class MyContainer extends Component {
constructor(props) {
super(props);
this.onMove = this.onMove.bind(this);
this.test = "this is a test";
}
onMove() {
console.log(this.test);
}
}
Also, test !== testVariable.