can i access the isroll variable which is inside useEffect? I want to run scroll when the button is pressed. but in my case it doesn't work. i have tried by doing setState and it's working but i got a new problem on iscroll.on() which says "Cannot read properties of undefined" i don't know how to solve this problem. is there someone who can help me?
function Arrangement() {
const ref = useRef(null);
const [prevButton, setPrevButton] = useState(false);
const [nextButton, setNextButton] = useState(true);
useEffect(() => {
const iscroll = new IScroll(ref.current, { // how to export this variable?
keyBindings: true,
scrollX: true,
mouseWheel: true,
click: true
});
iscroll.on("scrollEnd", () => {
if (iscroll.x === 0) {
setPrevButton(false);
} else {
setPrevButton(true);
}
if (iscroll.x === iscroll.maxScrollX) {
setNextButton(false);
} else {
setNextButton(true);
}
});
return () => {
iscroll.destroy();
}
}, []);
const onPrevButtonHandler = () => {
iscroll.scrollBy(220, 0, 600); // not working
}
const onNextButtonHandler = () => {
iscroll.scrollBy(-220, 0, 600); // not working
}
return (
<div className={classes.Container}>
<button className={clsx(classes.Button, classes.ButtonLeft, {
[classes.Button__active]: prevButton
})} onClick={onPrevButtonHandler} type="button" aria-label="Prev button">
<ChevronLeft />
</button>
<div className={classes.Wrapper} ref={ref}>
<ul>
<li></li>
</ul>
</div>
<button className={clsx(classes.Button, classes.ButtonRight, {
[classes.Button__active]: nextButton
})} onClick={onNextButtonHandler} type="button" aria-label="Next button">
<ChevronRight />
</button>
</div>
);
}
export default Arrangement;
I am open to any suggestions given.
Move your iscroll variable into a reference or a state.
Therefore, init it from the ref callback itself:
function Arrangement() {
const iscroll = useRef();
// OR
const [iscroll, setIscroll] = useState();
return (
<div className={classes.Container}>
...
<div
ref={(node) => {
const iscrollInstance = new IScroll(node, {
keyBindings: true,
scrollX: true,
mouseWheel: true,
click: true,
});
iscroll.current = iscrollInstance;
// OR
setIscroll(iscrollInstance);
}}
>
...
</div>
...
</div>
);
}
Notice the usage of iscroll depending on ref/state:
iscroll.current.on("...") // if its a ref