array empty when component rerenders

Question

I've tried searching, tried different approaches in the code, also had a friend help me but to no avail. My problem is that an array that I get from props is empty after setting some other state.

I have a carousel component. This component has two children:

Gallery (displays the images, either as cards, horizontaly or as a ul, stackad vertically) and Pagination (which is two buttons that return on click events and recieve booleans to be disabled).

Carousel gets an array called 'puffItems'. There are 11 items in this array. When console logging both in the Carousel and in Gallery (which recieves the array) the array is first '0', then rerenders and changes to '11'. After clicking "Next" Carousel rerenders and now the array rerenders only one time and its '0'. The funny thing is this only happens in mobile view. It works as expected in desktop view.

This is the code:

Carousel:

const Carousel = ({
forwardButtonText,
backwardButtonText,
puffItems,}: Props) => {
const widthOfOnePuff = (px(gridMaxWidth - 16 * 2) + Theme.spacing.space2) / 3;

const [cssState, setcssState] = useState({
    translate: 0,
    transition: 0.40,
});

const isPhone = useMediaQuery({
    minWidth: breakpointsNumber.phone,
    maxWidth: breakpointsNumber.tablet - 1,
});

const { translate, transition } = cssState;
const [currentIndex, setCurrentIndex] = useState<number>(3);
const [slideWidth, setSlideWidth] = useState<number>(widthOfOnePuff * 3);
const [numberOfPuffsToSlide, setNumberOfPuffsToSlide] = useState<number>(3);

useEffect(() => {
    if (isPhone) {
        setSlideWidth(widthOfOnePuff);
    }
}, [isPhone]);

console.log('puffItems', puffItems);


const onPreviousSlide = () => {
    setcssState({
        ...cssState,
        translate: translate - slideWidth,
    });

    setCurrentIndex(prev => prev - numberOfPuffsToSlide);
};

const onNextSlide = () => {
    setcssState({
        ...cssState,
        translate: translate + slideWidth,
    });

    setCurrentIndex(prev => prev + numberOfPuffsToSlide);
};

return (
    <CarouselContainer>
        <Gallery
            puffItems={puffItems}
            translate={translate}
            transition={transition}
            isPhone={isPhone}
        />
        <Space top={Theme.spacing.space3}>
            <Pagination
                forwardButtonText={forwardButtonText}
                backwardButtonText={backwardButtonText}
                onPreviousSlide={onPreviousSlide}
                onNextSlide={onNextSlide}
                inactivateForwardButton={puffItems.length <= currentIndex}
                inactivateBackwardButton={currentIndex === 3}
            />
        </Space>
    </CarouselContainer>
);};export default Carousel;

Gallery:

const Gallery = ({
puffItems,
translate,
transition,
isPhone,}: GalleryProps) => {
const listLength = puffItems.length;
let numberOfColumns = 0;
if (isPhone) {
    numberOfColumns = listLength % 3 === 0
    ? Math.floor(listLength / 3)
    : Math.floor(listLength / 3) + 1;
}

console.log('puffItems gallery ', puffItems.length);

return isPhone ? (
    <div>
        <GalleryListStyle
            columns={numberOfColumns}
            myTranslate={translate}
            transition={transition}>

            <GalleryListItems
                puffItems={puffItems}
                columns={numberOfColumns}
            ></GalleryListItems>

        </GalleryListStyle>
    </div>
) : (
    <GalleryCardStyle myTranslate={translate} transition={transition}>
        {puffItems.map((puffItem, index) => (
            <EpiFragments fragments={[puffItem]} key={index} />
        ))}
    </GalleryCardStyle>
);};export default Gallery;

and finally, Pagination:

const Pagination = ({
forwardButtonText,
backwardButtonText,
onPreviousSlide,
onNextSlide,
inactivateForwardButton,
inactivateBackwardButton,}: Props) => {
return (
    <PaginationContainer>
        <Button
            variant={ButtonVariant.Tertiary}
            onClick={onPreviousSlide}
            disabled={inactivateBackwardButton}
        >
            {backwardButtonText}
        </Button>

        <Button
            variant={ButtonVariant.Tertiary}
            onClick={onNextSlide}
            disabled={inactivateForwardButton}
        >
            {forwardButtonText}
        </Button>
    </PaginationContainer>
);};export default Pagination;

In the image below you can see, that number 1,2 and 3 are the after page-refresh and number 4 is when I click 'Next', meaning 'onNextSlide' is prompted. Does anyone know why this is happening? And why only in mobile view (chrome developer tool, ~375px width)?

Answer 1

I do a 'splice' on the array further down in 'GalleryListItems', which alters the array.. changed it to slice. This solves the problem. Thanks anyways!