Search code examples
javascriptreactjsweb-componentreact-slick

New React module inside another react component

So if it's silly question, please excuse me.

I'm using React Carousel Component (react-slick) for my project. What i want to achieve, inside this block i want to use my module "CarouselSlide".

<Slider {...settings}> //--> react-slick component tag
  <CarouselSlide/>     //--> my module
</Slider>

CarouselSlide is my react module shows single carousel slide.

Is it possible to use this way or do i have to edit "react-slick" component own source code ?

Solution

  • Depending on how you want to display the slides, the base react-slick my prove difficult since that component seems to display each sibling element in its own slide. The problem with using your own React component as a child for react-slick is that your component must return a single parent and there currently is no way of sending multiple sibling elements in your render function's return statement.

    react-slick seems to want a setup like the following:

    <Slider {...settings}>
    <div>1</div>
    <div>2</div>
</Slider>

    Yet creating a component in React and returning

    <div>1</div>
<div>2</div>

    Would return an error since you need a single parent encapsulating the return statement.

    Now instead if you had a more complicated component to define EACH slide you can then do something like:

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

    So it really boils down to how you use it. If you want to return the ENTIRE set of slides in a single component, you'll need to edit the base react-slick component to allow that.

    Take a look at this jsFiddle and you can see the problem.