Where to declare variable in react js

Question

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?

You never created a variable named test, you created testVarible. — Jerodev
– Jerodev, Commented Nov 21, 2017 at 15:56
You can call this.onMove.bind(this); inside the render or constructor. — Gamsh
– Gamsh, Commented Nov 21, 2017 at 16:14

Brijesh Bhakta · Accepted Answer · 2020-03-13 18:38:13Z

101

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" });
    }
}

edited Mar 13, 2020 at 18:38

answered Nov 21, 2017 at 16:12

Brijesh Bhakta

1,2901 gold badge8 silver badges14 bronze badges

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

4 Comments

Shubham Ojha Over a year ago

Can we set the value of this value in some other method like this.testVariable = "New Test" ?

Brijesh Bhakta Over a year ago

Yes, you can set the values on this in any function. Just make sure that the function has the context as of the class. @ShubhamOjha

user123456 Over a year ago

@BrijeshBhakta how the view will look like then ?

Brijesh Bhakta Over a year ago

@user123456 not sure if I understand your question but if you are asking what will be the value of testVariable after setState method is called, it will be "new value"

TimoStaudinger · Accepted Answer · 2017-11-21 15:57:55Z

6

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.

edited Nov 21, 2017 at 15:57

answered Nov 21, 2017 at 15:57

TimoStaudinger

42.7k16 gold badges91 silver badges96 bronze badges

6 Comments

Leonard Lepadatu Over a year ago

console.log(this.testVariable) ;)

TimoStaudinger Over a year ago

@LeonardLepadatu Thanks, almost missed that :)

Leonard Lepadatu Over a year ago

or can use most elegant const onMove = (e) => {console.log('foo')} and avoid to add this.onMove = this.onMove.bind(this); in constructor

user567 Over a year ago

I don't get the point and I get an error "Syntex error: Unexpected token" after the "const"

Leonard Lepadatu Over a year ago

without const, sorry! The point is to simplify the handling events.

|

Collectives™ on Stack Overflow

Where to declare variable in react js

2 Answers 2

4 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related