this.state undefined in a method

Question

I have a custom component that requires access to one of my actual component state (rows). I defined it in my constructor but when it should be rendered, this.state seems to be always empty, and i dont know why...

The console always displays "undefined this.state".

Here is my code :

export class TableContainer extends React.Component<any, any> {
    constructor(props : any, context: any) {
        super(props,context);
        this.state = { 
            rows:[ 
                { id: 1, title: 'John', count: 32 },
                { id: 2, title: 'Carl', count: 18 },
                { id: 3, title: 'Mike', count: 25 }
            ]
        };
    }

    rowGetter(i: number) {
        if(this.state) {
            console.log('defined this.state');
            return this.state.rows[i];
        }
        else {
            console.log('undefined this.state');
            return {};
        }
    }

    render() {
        return  (
            <div id="events-container">
                <ReactDataGrid
                    columns={this.state.columns}
                    rowGetter={this.rowGetter}
                    rowsCount={this.state.rows.length}
                    minHeight={500} 
                />
            </div>
        );
    }    
}

I'm new in react so probably it's a little mistake. I have to precise that rowsCount get the good "this.state.rows.length" in the render function.

Thank you by advance

See also https://stackoverflow.com/questions/36876105/how-to-properly-deal-with-scope-in-typescript — TSV, Jul 26 '17 at 09:24

score 3 · Answer 1 · answered Jul 26 '17 at 09:01

In this expression rowGetter={this.rowGetter} you are passing your method to ReactDataGrid component. Then it calls rowGetter internally and javascript functions work in such way, that this function this linked to calling object. It means that you have to bind your rowGetter method somehow to your component instance in order to have this linked to it.

There are several approaches:

Direct {this.rowGetter.bind(this)} - lacks efficiency as it creates function every time
this.rowGetter = this.rowGetter.bind(this) in constructor - verbose way
you can rewrite rowGetter method as an arrow function - I think it's the best approach here. It can look like this:

rowGetter = (i: number) => {
  if(this.state) {
    console.log('defined this.state');
    return this.state.rows[i];
  }
  else {
    console.log('undefined this.state');
    return {};
  }
}

Now this linked to parent context and this is your component instance - precisely what you need.

score 1 · Answer 2 · answered Jul 26 '17 at 08:55

1

The function is being called from another context. You shoud bind function to the correct context:

rowGetter={this.rowGetter.bind(this)}

or declare the function via "fat arrow":

rowGetter = (i: number) => {
    if(this.state) {
        console.log('defined this.state');
        return this.state.rows[i];
    }
    else {
        console.log('undefined this.state');
        return {};
    }
}

answered Jul 26 '17 at 08:55

TSV

7,538
1
29
37

Thank you so much for your answer !! – Kamzz Jul 26 '17 at 08:58
So many duplicates on Stackoverflow onn this question, you can just mark it a duplicate – Shubham Khatri Jul 26 '17 at 09:00

score 1 · Answer 3 · answered Jul 26 '17 at 08:55

You need to bind you method to this in you constructor:

    constructor(props : any, context: any) {
        super(props,context);
        this.state = { 
            rows:[ 
                { id: 1, title: 'John', count: 32 },
                { id: 2, title: 'Carl', count: 18 },
                { id: 3, title: 'Mike', count: 25 }
            ]
        };
this.rowGetter = this.rowGetter.bind(this);
    }

score 1 · Answer 4 · answered Jul 26 '17 at 08:58

1

You can have 2 choose.

Use bind(this)
```
this.rowGetter.bind(this)
```

2.Use arrow-function then you don't want to use bind

answered Jul 26 '17 at 08:58

Voi Mập

779
3
7
22

this.state undefined in a method

4 Answers4