React's this with onClick or onChange function [duplicate]

Question

I am calling a function in my react component

<button onClick={this.createComment}>Submit Comment</button>

Inside my createComment function 'this' is undefined for some reason

createComment(event) { console.log('inside createComment') console.log('event', event) console.log('this', this) event.preventDefault() }

I need to call this.setState inside the createComment function. How do I get the this to be the this of the component??

Vivek Doshi · Accepted Answer · 2017-11-08 06:49:38Z

2

change this :

onClick={this.createComment}

to

onClick={(e) => this.createComment(e)}

OR

onClick={this.createComment.bind(this)}

NOTE :

As @rafahoro commented :

You should prefer to bind "this" on the constructor:
constructor() { this.createComment = this.createComment.bind(this); } 
Using "onClick={(e) => this.createComment(e)}" or similar, will create a new function on each render() call.

edited Nov 8, 2017 at 6:49

answered Nov 8, 2017 at 6:32

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shubham Khatri Over a year ago

Either use arrow function or .bind(this) onClick={(e) => this.createComment(e)}

Vivek Doshi Over a year ago

@ShubhamKhatri, thanks

rafahoro Over a year ago

You should prefer to bind "this" on the constructor: constructor() { this. createComment = this. createComment.bind(this); } Using "onClick={(e) => this.createComment(e)}" or similar, will create a new function on each render() call.

Collectives™ on Stack Overflow

React's this with onClick or onChange function [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related