The intended output here should be each 3 divs (red) within a blue div. I don't understand what I am doing wrong because this should normally work.
// tried this method, https://stackoverflow.com/questions/63695426/react-wrap-every-3-components-into-a-div can't get it to work. 🤷♂️
const ImageGrid = ({slice} :any) => (
slice?.items?.map((item :any, i:number) => {
const myArrx :any = []
myArrx.push(<Box bg={'red'} p={15}><img src={item.image.url} alt={item.image.alt} /></Box>)
return myArrx.reduce((groups :any, curr:any) => {
const arr : any[] = groups[groups.length - 1];
arr.push(curr);
if (arr.length === 3) groups.push([]);
return <Box bg={'blue'} p={15}>{groups}</Box>;
}, [[]])
})
)
I was trying to doit the hard way, here's the simple and elegant solution
const ImageGrid = ({slice} :any) => {
const pack :any = []
slice?.items?.map((item :any, i:number) => {
pack.push(<Child data={item}/>)
})
const data2 = [...pack]
const groupedData1 = []
while(data2.length) {
groupedData1.push(data2.splice(0, 3));
}
return (
<>
<Container maxW={1180} bg='orange'>
<GridWrap>
{groupedData1.map((el, i) =>
<Parent>
<HStack alignItems={'top'}> {el} </HStack>
</Parent>
)}
</GridWrap>
</Container>
</>
)
}