"TypeError: Cannot read property 'selectPage' of undefined"

Question

I am using React, Material-UI and lodash but the following code within the render method gives me an error saying "TypeError: Cannot read property 'selectPage' of undefined" :

        tmppage = _.map(_.range(0, this.state.groupsdt.length), function (i) {

                    return (
                            <MenuItem >
                                <IconButton onClick={() => { {this.selectPage(i)} }}><WebAsset /></IconButton>
                                Page {i + 1}
                            </MenuItem>
                        )
        });

I've defined this.selectPage in constructor(props) as follows :

constructor(props){
    super(props);
    this.state = {
                    loading: true,
                    modalopen: false,
                    menuopen: false,
                    urls:null,
                    groupsdt:null,
                    webkey:null,

                    currentpage:0,

                    currentBreakpoint: 'lg',
                    mounted: false,
                    layouts: {lg: null},

                    opentopublic:false,

                  };

    this.addPage      = this.addPage.bind(this);
    this.selectPage   = this.selectPage.bind(this);
    this.addBox       = this.addBox.bind(this);
    this.removeBox    = this.removeBox.bind(this);
    this.doPost       = this.doPost.bind(this);

    this.doHome       = this.doHome.bind(this);
}

Please tell me what I'm missing... and thank you in advance.

Giorgi Moniava Giorgi Moniava · Accepted Answer · 2019-02-24T08:59:11

Your problem seems to be coming from using function keyword in callback for map, try using arrow function instead. You can read more on arrow functions here.

_.map(_.range(0, this.state.groupsdt.length), (i)=> {
    ....
});

"TypeError: Cannot read property 'selectPage' of undefined"

2 Answers