Я пытаюсь получить кнопку со стрелкой условно, если размер экрана меньше или требуется больше шагов, но это не работает ⇐ CSS

[Anonymous]

Я пытаюсь вернуть кнопку со стрелкой и условно, если размер экрана меньше или поступает больше шагов, а также, если шага за его пределами нет, стрелка не должна отображаться, но в моих текущих реализациях она не работает,

Код: Выделить всё

export const StatusStepper = ({ activeStep, steps, handleStepClick }) ={
const stepperRef = useRef(null);
const [showLeftArrow, setShowLeftArrow] = useState(false);
const [showRightArrow, setShowRightArrow] = useState(false);

const checkArrows = () ={
if (stepperRef.current) {
setShowLeftArrow(stepperRef.current.scrollLeft 0);
setShowRightArrow(stepperRef.current.scrollLeft < stepperRef.current.scrollWidth - stepperRef.current.clientWidth);
}
};

const scrollStepper = (direction) ={
if (stepperRef.current) {
const stepWidth = stepperRef.current.clientWidth / steps.length;
const scrollAmount = direction === 'left' ? -stepWidth : stepWidth;
stepperRef.current.scrollBy({
left: scrollAmount,
behavior: 'smooth',
});
}
};

useEffect(() ={
checkArrows();
}, []);

useEffect(() ={
const handleResize = () ={
checkArrows();
};

window.addEventListener('resize', handleResize);

return () ={
window.removeEventListener('resize', handleResize);
};
}, []);

return (

{showLeftArrow && (

[url=#]

{step.title}
{/* 
{step.counts}


Подробнее здесь: [url]https://stackoverflow.com/questions/78691715/i-am-trying-to-get-the-arrow-button-conditionally-if-the-screen-size-is-smaller[/url]