[SOLVED] Event handler function not updating, state undefined inside function scope

Event handler function not updating, state undefined inside function scope

I am working on a scheduler app and for that I am using the kalend calendar component library. The usage looks something like that

<Kalend
    onEventClick={onEventClick}
    onNewEventClick={onNewEventClick}
    events={bookings}
    initialDate={new Date().toISOString()}
    hourHeight={60}
    initialView={CalendarView.WEEK}
    disabledViews={[CalendarView.DAY]}
    timeFormat={'24'}
    weekDayStart={'Monday'}
    calendarIDsHidden={['work']}
    language={'en'}
/>

My problem is that I access the userId of the current user inside the handler function onEventClick. This userId is asynchronously provided by a custom hook and is undefined on initial render. Once the userId updates, it isn't updated inside the function scope. I also tried using the useCallback Hook with the userId in the deps Array but with the same result.

My handler function:

const onEventClick = (data: any) => {
    setPopupData(data)
    setEventClicked(true)
    if (userProfile?.id === data.ownerId) {
      setModalOpen(true)
    } else {
      setPreviewOpen(true)
    }
  };

When console logging the userId in the component scope it gets updated (due to the Hook finally fetching the userProfile) but inside the handler function it remains undefined

Solution

you should be able to do this using useRef - https://reactjs.org/docs/hooks-reference.html#useref

When you assign userId later with something like

const userIdRef = useRef()

// somewhere in your code
userIdRef.current = userId

, you will be able to access it in onEventClick function.