Syntax for passing handleConfirmation function from GuestList Component to Guest component.

Essentially, and there may be some details I am missing out on, but we need to pass the index to the toggleConfirmationAt method.

If we simply write handleConfirmation={props.toggleConfirmation(index)} the usage of our parentheses to pass an argument to the function will mean the function is immediately invoked once it is rendered, this is because we are no longer passing the function as the prop, but the result of the function once it is called.

When the toggleConfirmation function is called it calls setState which then causes the component to re-render, when the component re-renders it calls toggleConfirmation() again which then calls setState again, causing the component to re-render, causing toggleConfirmation() to be called again which calls setState() which causes.... hopefully you start to see the problem here. We get stuck in an infinite loop of the component rendering itself.

In the method used in the video we are assigning the prop to be an anonymous function, that when called will call the toggleConfirmationAt method with the parameters.

Make note that if we did not need to pass a parameter to the toggleConfirmation function, and it was able to magically know the index, we could simply write handleConfirmation={props.toggleConfirmation} and because no parameters are being passed, the parentheses are not being used, and thus the function is not called on render.

This problem is almost identical to using a function with a parameter in an event listener in regular JavaScript. This StackOverflow answer explains the same concept but in regular JavaScript with event listeners.