I'm using react-slick, how can I export a React Component as a single element but remove the parent div on render

Question

I have a slider I built in react js using react-slick

<Slider {...settings}>
   <FeatureSliderItems/>
 </Slider>

<FeatureSliderItems/> is defined below (It contains the slides to be displayed)

const FeatureSliderItems= () =>(
    <>
      <div className="slide-item">
         <h2 className="">Create multiple sub-account</h2>
      </div>
      <div className="slide-item">
         <h2 className="">Create multiple sub-account 2</h2>
      </div>
    </>
)

But the issue I have now is how I can make the slide-items in <FeaturedSliderItems/> appear under <Slider/> as 2 sibling slides and not inside a single div (as exported in <FeatureSliderItems/> since I can only export my components under a single root element in react)

So basically I want this as my result

<Slider ref={c => (this.slider = c)} {...settings}>
    <div className="slide-item">
      <h2 className="">Create multiple sub-account</h2>
    </div>
    <div className="slide-item">
      <h2 className="">Create multiple sub-account</h2>
    </div>
 </Slider>

and not

<Slider ref={c => (this.slider = c)} {...settings}>
    <div>
      <div className="slide-item">
        <h2 className="">Create multiple sub-account</h2>
      </div>
      <div className="slide-item">
        <h2 className="">Create multiple sub-account</h2>
      </div>
    </div>
 </Slider>

Is this possible?

Answer 1

The children of Slider need to pass an array of elements. If you don't want to using map after Slider and only want use FeatureSliderItems. You can update FeatureSliderItems return an array of element. It is the same with using map.

const FeatureSliderItems = () => [
  <div className="slide-item">
    <h2 className="">Create multiple sub-account</h2>
  </div>,
  <div className="slide-item">
    <h2 className="">Create multiple sub-account 2</h2>
  </div>,
];