Cannot read property of undefined in spfx

Question

Hear is a SPFx react webpart ".tsx" file code image

Have you any solution ?

Answer 1

You have to use arrow function in this.state.items.map this in anonymous function has different context and you would have to bind also the anonymous function itself like:

this.state.items.map(function (item, key) {
    return (
        <div>
            <button onClick={this.showDialog}>click</button>
        </div >
    );
}.bind(this));

Correct use:

this.state.items.map((item, key) => 
    <div>
        <button onClick={this.showDialog}>click</button>
    </div>
);