CODEWITHSUNDEEP
javascriptreactjsecmascript-6
varad
varad

Reputation: 8029

React: Using arrow function to pass a prop

In one of my component I am using something like:

<PhotoList update_photo={() => this.update_photo()} />

Here I am passing a function as a props which updates a photo to the state..

and In my photo list component I have list of photos where I am updating the photo like:

<div className="single-photo" onClick={() => this.props.update_photo(photo)}>

Here it is passing undefined instead of photo.. buth when I use it in general way like <PhotoList update_photo={this.update_photo.bind(this)} /> and <div className="single-photo" onClick={this.props.update_photo.bind(this, photo)}> it works

What is the difference and why is the first method not working ??

Upvotes: 0

Views: 1743

Answers (2)

Matt Davis
Matt Davis

Reputation: 371

It would be helpful to see how the update_photo() method is defined, but I suspect it has something to do with the fact arrow functions don't bind their own this value. If you're using an arrow function as a method, this will be undefined.

Upvotes: 0

Coder1
Coder1

Reputation: 13321

It's difficult to tell without knowing how this.update_photo() is defined, but I'm guessing the problem is that the function you are passing in takes no argument, but you are trying to pass in an argument from the child.

So perhaps try wiring up the argument like this:

<PhotoList update_photo={(photo) => this.update_photo(photo)} />

Then this.update_photo should be able to set state based on the argument passed into it.

Upvotes: 1

Related Questions