React: Slide update on component update

[MatzeKitt]

I’m currently trying to use Splide in a react project where it’s possible to add new slides outside of splide.add(). This also updates the component. However, Splide doesn’t recognize this component update, even if it should.

Any idea where I can start digging for a solution?

[NaotoshiFujita]

Do you mean you can not add slides?
The Splide component only updates the slider when options are changed or a new slide is added.
https://github.com/Splidejs/react-splide/blob/master/src/js/components/Splide/Splide.tsx#L67

[MatzeKitt]

I can add slides. Maybe I can sketch the problem more precisely with some pseudo code:

My component returns the following:

<Splide ref={ splideRef }>
    <Fragment children={ props.children } />
</Splide>

<Button onClick={ addPropsChild } />

The <Fragment> renders this in the end for each children:

<SplideSlide>
    <div>Slide</div>
</SplideSlide>

By clicking on the button, I add a new child, which renders the same content with the <SplideSlide>.

While the child gets added successfully, Splide doesn’t update the slides accordingly. I need to manually do a splideRef.current.splide.refresh(); to refresh it. While that’s a usable workaround for me for adding a slide, I have no control over the remove functionality so that I’m unable to refresh it again on this point.

Thus I wonder if there’s another solution where Splide recognizes the change outside of its component?

[NaotoshiFujita]

Your component seems not to re-render the Splide component when you add a new slide.

How about using a state:

const [ children, setChildren ] = useState( [] );

return (
  <Splide ref={ splideRef }>
      <Fragment children={ children } />
  </Splide>
  
  <Button onClick={ () => setChildren( [ ...children, newChild1 ] ) } />
);

Or if you are using a class component:
https://github.com/Splidejs/react-splide/blob/master/examples/src/js/components/DynamicSlidesExample.tsx

[MatzeKitt]

Yes, I used something like that now. But the problem with the deletion still persists where I don’t have any possibility to hook into.

[NaotoshiFujita]

How do you remove the slide?

[MatzeKitt]

It’s via an external component, which dispatches an action to remove it.