How To Map An Array Of Children Items For A Carousel?

I'm trying to wrap a Carousel component around an array of mapped objects as children of the component. Currently I'm only able to have the mapping create 1 child of mapped objects

Solution 1:

Updated answer:

The carousel requires all the fields to be rendered on start.

To create multiple slides with 3 items on each slide, you should 'split' the data array into multiple sections, containing 3 items each.

For those items, you render a single <Container> with the 3 children inside like so:

constarray_chunks = (array, chunk_size) => Array(Math.ceil(array.length / chunk_size)) .fill() .map((_, index) => index * chunk_size) .map((begin) => array.slice(begin, begin + chunk_size)); 
const chunks = array_chunks(SymbolData, 3);

<Carousel>
    {chunks.map((chuk) => {
        return (
            <Container>
                {chuk.map((c) => {
                    return (
                        <Griditemxs={4}md={4}><Card><CardHeader/><CardContent></CardContent></Card></Grid>
                    );
                })}
            </Container>
        );
    })}
</Carousel>

Note:

• I've used the following Stack Answer to split the data array into chunks of 3:

  Split array into chunks

• The <container> does not create a row, it's shown in a column. I guess you should be able to fix this, I'm not that familiar with material-ui

Sandbox

---

Original answer:

You're rendering a <container> for each map iteration.

Move the map inside the <container> so you can render multiple 'cells' in the single <container> like so:

<ContainermaxWidth="lg"component="main"><Gridcontainer>
        {SymbolData?.slice((page - 1) * itemsPerPage, page * itemsPerPage).map(
            (data, index) => {
                return (
                    <Griditemkey={index}xs={4}md={4}><Card>
                            ...
                        </Card></Grid>
                );
            }
        )}
    </Grid></Container>

Updated CodesandBox

Solution 2:

As per my understanding of the problem statement, there are two possible things out of which you want to achieve one.

First One: If you want to show all the three graphs in a single slide, you should move your symbolData map inside the <Grid container> just like the above solution and this CodeSandbox Since you are already slicing with page numbers, you will see n different slides with 3 graphs per slide based on the number of pages.

Second One (unlikely) : You might want to show the graph in full width of the slide. For that you need to use xs={12} md={12} in <Grid item key={index} xs={?} md={?}>