La salida prevista aquí debe ser cada 3 divs (rojo) dentro de un div azul. No entiendo qué estoy haciendo mal porque esto normalmente debería funcionar.
// 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>; }, [[]]) }) )Estaba tratando de hacerlo de la manera difícil, aquí está la solución simple y elegante.
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> </> ) }