Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React by Example Building the Application Connecting the Confirm Guests Handler

Posted by Thai Do
Thai Do
1,209 Points

Explanation on how to pass function props

I am confused with how to pass the function props. Like in App.js, you just simply bind the function directly to the props.

<GuestList
  ...
  toggleConfirmationAt={this.toggleConfirmationAt}
/>

However, in GuestList.js, you are passing an arrow function and then point to the props:

<Guest
  ...
  handleConfirmation={() => props.toggleConfirmationAt(index)}
/>

Could you explain the difference of those two ways? Or is there any note that could be included in the Teacher's Note section? Thank you!

1 Answer

Boon Kiat Seah
Boon Kiat Seah
66,664 Points
Boon Kiat Seah
Boon Kiat Seah
66,664 Points

toggleConfirmationAt={this.toggleConfirmationAt}

This way of writing code is running the function on every new components rendered into the UI.

handleConfirmation={() => props.toggleConfirmationAt(index)}

This way of writing code is passing a function embedded within a function and to have the function executed on an event. In this context, we are running this function with the embedded handleComfirmation whenever the input element found in the Guest component triggers an onChange event.

Hope this helps.