Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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!

Boon Kiat Seah
Boon Kiat Seah
66,639 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.