WithStore: Cannot read property 'state' of undefined (pure-react-carousel)

Question

I use pure-react-carousel library and try to navigate to specific slide by onClick method of my Button.

Please explain me how to use setStoreState because I tried to do it by myself (as written in docs) and whole my page where I used it just invisible. I tried to use this.props.carouselStore.setStoreState({ currentSlide: 2 }).

When I add export withStore my page become invisible. and I get following error.

Error is Uncaught TypeError: Cannot read property 'state' of undefined
my export
    export default WithStore(MyComponent, state => ({
        currentSlide: state.currentSlide,
      }));

Answer 1

The Parenthese are unnecessary. Try this:

export default WithStore(MyComponent, state => {
    currentSlide: state.currentSlide,
  });

Answer 2

I am actually an author for Pure React Carousel.

WithStore() only works if it is a child of <CarouselProvider />

WithStore accesses React's context API. CarouselProvider creates the context. When you create a context, React only passes the context down to child components of the component that created the context.

So, the use of WithStore in this pseudo-code example will give you the error.

<YourComponentThatUsesTheWithStoreHOC />
<CarouselProvider>
  // all your buttons, slides, dots, etc...
</CarouselProvider>

This will also give you that errod.

<CarouselProvider>
  // all your buttons, slides, dots, etc...
</CarouselProvider>
<YourComponentThatUsesTheWithStoreHOC />

This pseudo-code example will work

<CarouselProvider>
  // all your buttons, slides, dots, etc...
  <YourComponentThatUsesTheWithStoreHOC />
</CarouselProvider>