0

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,
      }));
mrbinky3000
  • 4,055
  • 8
  • 43
  • 54
volverine
  • 23
  • 1
  • 5
  • The error means that somewhere in your code, you have `x.state`, where `x` is undefined. The most likely cause is you using `this.state` but the context isn't bound properly. –  May 08 '19 at 11:38
  • state is from the function calllback not the component state – Daniel Danaee May 08 '19 at 12:26

2 Answers2

3

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>
mrbinky3000
  • 4,055
  • 8
  • 43
  • 54
  • I am also facing the same error "WithStore: Cannot read property 'state' of undefined (pure-react-carousel) ", can you explain more in details to fix this issue, please. – suresh Sep 26 '19 at 19:55
  • Any component that uses WithStore must be a descendant of CarouselProvider. Meaning, it must appear in the DOM somewhere between the CarouselProvider tags for your carousel. – mrbinky3000 Sep 27 '19 at 15:03
0

The Parenthese are unnecessary. Try this: 

export default WithStore(MyComponent, state => {
    currentSlide: state.currentSlide,
  });
Daniel Danaee
  • 280
  • 1
  • 8