How can i achieve 100% reusability of that react-bootstrap component?

Question

I am trying to create a reusable carousel using react-bootstrap, i could create that one"

const ReusableCarousel = (props) => {
    return (
        <Carousel className="mt-4 border">
            {props.items.map((item, index) => {
                return (
                    <Carousel.Item key={index}>
                        <Row> 
                            {props.children}
                        </Row>
                    </Carousel.Item>
                );
            })}
        </Carousel>
    );
}

Now as you see it is reusable till the point of the carousel item, props.children may represent multiple elements per one slide or single element per slide, but i can not achieve that according to my logic

in the parent:

   <ReusableCarousel items={categories}> //categories is an array of arrays of objects
      {
         //item prop should be passed here to carouselItemCategories component
         //but i couldn't find a way to achieve that
         <CarouselItemCategories key={i} /> 
      }
   </ReusableCarousel>

carouselItemCategories Component:

const CarouselItemCategories = (props) => {
    //still in my dreams
    const { item } = props;
    return (
        <>
            {
                item.map((c, index) => {
                    return (
                        <Col key={index}>
                            //a category card here
                        </Col>
                    );
                })
            }
        </>
    );
}

Now i know what makes it work, it is about passing item prop(which represent an array of objects represents fraction of my categories) but i could not find any way to achieve that

you can imagine categories like that:

const categories = [
   [
    {
      title: 'Laptops',
       background: 'red'
    },
    {
      title: 'Tablets',
      background: 'blue';
    }
   ],
   [
    {
      title: 'Mouses',
       background: 'yellow'
    },
    {
      title: 'Printers',
      background: 'orange';
    }

   ]
]

Answer 1

If I understand you correctly, you want to use each of the items from your ReusableCarousel to generate a new CarouselItemCategories with the individual item passed in as a prop?

If so, you may want to take a look at the cloneElement function. Effectively, inside your mapping of the items prop, you would create a clone of your child element, and attach the individual item as a prop to that clone. Something like this:

const ReusableCarousel = (props) => {
  return (
      <Carousel className="mt-4 border">
          {props.items.map((item, index) => {
              return (
                  <Carousel.Item key={index}>
                      <Row> 
                          {React.cloneElement(props.children, { item })}
                      </Row>
                  </Carousel.Item>
              );
          })}
      </Carousel>
  );
}