Calling a function from child component, but it is repeatedly being called [duplicate]

Question

I am trying to call a function that is 2 levels up from my child component (as this will refresh the data sent down in props to my child).

However, the problem I am facing is that the function getBooking is being constantly called. It should only be called once when the form submits in the child component, so not sure how it's being repeatedly called.

Grandparent:

const getBooking = async (fullReload: boolean) => {
  ...code
}

<BookingGuestList
   getBooking={getBooking(false)}
/>

Parent:

<GuestListRow
   getBooking={getBooking()}
/>

Child:

getBooking();

Answer 1

You need to call the parent function in the following way

Child:-

getBooking={()=> getBooking()}