Accessing component variables from methods

Question

In my app, I have a component with a state variable and a component variable in its constructor. However, if I try accessing them from my method by resizing the window, I get undefined and cannot read property 'test' of undefined.

import React from 'react';

class Testapp extends React.Component {

    constructor(props) {
        super(props);
        this.state = {test: "he"};
        this.test = "hu";
        window.addEventListener('resize', this.testCallback);
    }

    testCallback() {
        console.log(this.test);
        console.log(this.state.test);
    }

    render() {
        return( <p>Hello world</p> );
    }
}

export default Testapp;

How can I access these attributes from the method?

score 3 · Accepted Answer · answered Jan 20 '20 at 15:52

3

Your function as is does not have access to the this variable in the correct context.

The easiest solution is to convert to an arrow function

testCallback = () => {
  console.log(this.test);
  console.log(this.state.test);
}

This will give your function the correct context of this.

Alternatively you could manually bind it in your constructor.

constructor(props) {
  super(props);
  this.state = {test: "he"};
  this.test = "hu";
  window.addEventListener('resize', this.testCallback);
  this.testCallback = this.testCallback.bind(this);
}

answered Jan 20 '20 at 15:52

Brian Thompson

13,263
4
23
43

Ohhh, because a non-arrow-function already has its on `this`-context, right? – Jan Berndt Jan 20 '20 at 15:55
Here is a good answer that can explain things much better than I can https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback – Brian Thompson Jan 20 '20 at 15:56

score 0 · Answer 2 · answered Jan 20 '20 at 16:32

0

Just use an arrow function instead. Alternatively, you can bind 'this' to the method.

answered Jan 20 '20 at 16:32

Suraj Auwal

322
3
9

Accessing component variables from methods

2 Answers2