Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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" });
                Can we set the value of this value in some other method like this.testVariable = "New Test" ?
– Shubham Ojha
                Oct 22, 2018 at 7:53
                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
– Brijesh Bhakta
                Oct 23, 2018 at 4:58
                @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"
– Brijesh Bhakta
                Feb 15, 2021 at 17:03
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);
                or can use most elegant  const onMove = (e) => {console.log('foo')} and avoid to add this.onMove = this.onMove.bind(this); in constructor
– Leonard Lepadatu
                Nov 21, 2017 at 16:05
                I don't get the point and I get an error "Syntex error: Unexpected token" after the "const"
– user567
                Nov 21, 2017 at 16:09
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.