3

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 ?

Erdal SATIK
  • 652
  • 2
  • 9
  • 32

2 Answers2

3

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.

Fizz
  • 3,427
  • 4
  • 27
  • 43
  • Thank you very much, for your answer. I am a react newby so i wanted to learn if possible or it's nonsense. I think there will be a lot of coding. – Erdal SATIK Jun 27 '16 at 13:25
2

Yes it possible .You can components inside components.This is how react works

Piyush.kapoor
  • 6,715
  • 1
  • 21
  • 21
  • i forget to point out but i have tried but it doesn't render all sliders, according to json data. Like Fizz said. – Erdal SATIK Jun 27 '16 at 13:22