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?

You're already using a fragment so that's exactly what you should already be getting? If you inspect the DOM are you seeing otherwise? — Brian Thompson, Jun 21 '21 at 15:51
My thought also but It doesn't seem to be working with react-slick, it's rendering all slider-items under a div. — Hilory, Jun 21 '21 at 15:56
It's possible that `react-slick` is adding the div internally — Brian Thompson, Jun 21 '21 at 16:24

score 1 · Accepted Answer · answered Jun 21 '21 at 16:16

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>,
];

GabrielMC · Answer 2 · 2021-06-21T16:04:55.930

0

It seems to me that you should create a component to render a single feature slide item. Then use that component for each item instead of a single component to render multiple. I just see repeated code in your example, and that tells me that a new component could be created.

<Slider {...settings}>
   {slideItems.map((item, index) => (
     <FeatureSliderItem key={index} item={item}/>
   )}   
 </Slider>

edited Jun 21 '21 at 16:04

answered Jun 21 '21 at 15:59

GabrielMC

288
2
7

Thanks for the response, I'm aware I can do it this way also but I'm just trying to break up my code into the smallest possible unit. – Hilory Jun 21 '21 at 16:03
This would result in the same number of components, and this component would be smaller that the `FeatureSliderItems` component you have in your example – GabrielMC Jun 21 '21 at 16:04
Maybe, but the 'slide-item' contains more elements, I just minified for the sake of asking this question. That means I'd have to break each item of 'slides-item' into an array of objects in other to map it. – Hilory Jun 21 '21 at 16:07

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

2 Answers2