Carousel not rendering two elements per slide

Question

I am using this carousel-library.
I want to show two cards in each slide in my carousel. My code-

Catalog.js

import React from 'react';
import { Grid, Typography, Divider, FormControl, InputLabel, MenuItem, Select, Button } from '@material-ui/core';
import CarouselComp from '../../components/carousel/CarouselComp'
import RectangularCard1 from '../../components/cards/ReactangularCard1';
import { catalog_data } from '../../static_data'
    
const Catalog = (props) => {
    
    let popularBundles = JSON.parse(JSON.stringify(catalog_data.popularBundles))    

    return (
        <Grid container>
            <CarouselWrapperRect data={popularBundles} />
        </Grid>
    )
}


const CarouselWrapperRect = ({ data }) => {
    let newArray = [];
    while (data.length > 0)
        newArray.push(data.splice(0, 2));

    return (
        <Grid item container >
            <Grid item container>
                <CarouselComp>
                    {newArray.map((each, i) =>
                        <CarouselSlideRect newData={each} key={i} />
                    )}
                </CarouselComp>
            </Grid>
        </Grid >
    )
}



const CarouselSlideRect = ({ newData }) => {
    return (
        <Grid container direction='row' xs={12} spacing={2}>
            {newData.map((each, i) =>
                <Grid item xs={6} >
                    <RectangularCard1 bundleBy={each.bundleTitle} />
                </Grid>
            )}
        </Grid>
    )
}

export default Catalog;

CarouselComp.js

import React, { useState } from 'react'
import Carousel from 'react-material-ui-carousel'    
import { Button } from '@material-ui/core'
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';

const CarouselComp = ({ children }) => {

    return (
        <div>
            <Carousel autoPlay={false} navButtonsAlwaysVisible={true}
              cycleNavigation={false}
              NavButton={({ onClick, className, style, next, prev }) => {
                    return (
                        <Button onClick={onClick} className={classes.navButton}>
                            {next && <ChevronRightIcon />}
                            {prev && <ChevronLeftIcon />}
                        </Button>
                    )
                }}
            >
                {
                    children
                }
            </Carousel>
        </div>
    )
}

export default CarouselComp;

RectangularCard1.js

import React from 'react'
import {
     Card
} from '@material-ui/core'

const RectangularCard1 = (props) => {

    let { bundleBy } = props

    return (
        <Card variant='outlined'>
            <span>{bundleBy}</span>
        </Card>
    )
}

export default RectangularCard1;

static_data.js

export const catalog_data = {

    popularBundles: [{
        bundleTitle: 'by Octopi One',
    },
    {
        bundleTitle: 'by Developia'
    },
    {
        bundleTitle: 'by Custom Company Name'
    },
    ],
}

I don't see any carousel rendered, why is this happening? I want to show atmost two cards in one slide like below-

Here's my sandbox link - codesandbox

Answer 1

You're directly mutating the data prop. Don't mutate props in react. Instead of that, make a copy of the content of data prop inside newData and proceed like so :-

  let newData = [...data];
  while (newData.length > 0) newArray.push(newData.splice(0, 2));

Here's the forked codesandbox