How to print an array of children?

Question

React

Hello!

There is a react-swiper library.
I need to make for the ui-kit how many wrapper components above this slider.
Slider example:

<Swiper>
        <SwiperSlide>Слайд 1</SwiperSlide>
        <SwiperSlide>Слайд 2</SwiperSlide>
        <SwiperSlide>Слайд 3</SwiperSlide>
 </Swiper>

In order to make a slide, you need to additionally push the content into the SwiperSlide component, this is what prevents wrapping it with an additional component.

wrapper example

const Carousel = ({ children }) => {
  return (
    <>
      <Swiper>
         <SwiperSlide>{ children }</SwiperSlide>
      </Swiper>
    </>
  );
};

// Вызов

<Carousel>
      <div>1</div>
       <div>2</div>
       <div>3</div>
</Carousel>

I get 1 slide, which will consist of 3 divs. Is it possible to print each child separately via SwiperSlide inside the component?

Answer 1

<Swiper>
  {children.map(n => <SwiperSlide>{n}</SwiperSlide>)}
</Swiper>