sliderRef.current is undefined until I interact with slider

[jvgeee]

I'm using custom pagination buttons that allow skipping to a slide on press.

export const IntroSlider = observer(function IntroSlider(props: IntroSliderProps) {
  const { style, renderItem, onDone, data, addCloseButton = false } = props
  const sliderRef = useRef(null)
  return (
    <AppIntroSlider
      renderItem={renderItem}
      data={data}
      onDone={onDone}
      renderPagination={(activeIndex) => (
            <PaginationButtons
              activeIndex={activeIndex}
              size={data.length}
              sliderRef={sliderRef}
              onDone={onDone}
              addCloseButton={addCloseButton}
            />
          )
       }
      ref={sliderRef}
    />
  )
})

When the component mounts. sliderRef.current is undefined. It only gets defined after I manually swipe from one page to the next.

This means that on the first slide, if I click the pagination buttons, sliderRef.current.goToSlide is undefined and causes an error. Similarly, sliderRef.goToSlide doesn't exist.

What am I doing wrong here?

[jvgeee]

Turns out this was a problem with the way I was setting the ref on the AppIntroSlider component. Ditching useRef() and changing my code this worked:

let sliderRef;

return <AppIntroSlider
    {...rest}
    ref={(ref) => (sliderRef = ref)}
/>

[fregayeg]

Turns out this was a problem with the way I was setting the ref on the AppIntroSlider component. Ditching useRef() and changing my code this worked:

let sliderRef;

return <AppIntroSlider
    {...rest}
    ref={(ref) => (sliderRef = ref)}
/>

Hello @jvgeee I have a similar problem with custom pagination component. Can you please show me how you use goToSlide() function please ?