Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'state')

[rohansaaram]

Hello I am getting this error when I use withStore() or even hooks as described in the docs

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'state').

I actually want to remove display of button when there are no more slides to scroll further.

Thanks for the wonderful library.

[Conor-Hinchee]

Hey @rohansaaram ! Thanks for raising this issue. I have used withStore() extensively and haven't run into this issue yet. I would love to take a look at what you are trying to do so I can get some more context on the error you are getting. Would you be able to spin up an example here https://codesandbox.io/ ?

[rohansaaram]

https://codesandbox.io/s/throbbing-smoke-75uxze

Copied this from the docs here https://github.com/express-labs/pure-react-carousel#hooks-and-usecontext

import React, { useContext, useEffect, useState } from 'react';
import { CarouselContext } from 'pure-react-carousel';

export function MyComponentUsingContext() {

const carouselContext = useContext(CarouselContext);

const [currentSlide, setCurrentSlide] = useState(carouselContext.state.currentSlide);
useEffect(() => {
function onChange() {
setCurrentSlide(carouselContext.state.currentSlide);
}
carouselContext.subscribe(onChange);
return () => carouselContext.unsubscribe(onChange);
}, [carouselContext]);
return The current slide is: ${currentSlide};
}

Thanks

[Conor-Hinchee]

The problem is you are trying to use CarouselContext outside of the CarouselProvider component. The context has not been initialized yet.

The fix is to move the CarouselProvider to a parent component. An example would be like this https://codesandbox.io/s/peaceful-https-kf7b0s?file=/src/index.js . I just moved CarouselProvider from App to the parent.

I am moving this issue to the discussion board. Let's continue discussing this there if you have any further questions or concerns.