React multi carousel renders items wrongly - reactjs

Question

I started using Next js and I don't know whether it is problem regarding to it or React itself.
So the problem is that the "react-multi-carousel" does not work in my app. So, basically it works if I hardcode the values in there, but when I use my custom components, where the is map function, it does not render it properly. It takes 3 components as they are in one . You can verify it on the image I posted below. I tried to render Compilations component outside SliderCarousel component and it worked as it should, but when I pass Compilations as a child to SliderCarousel, it does not catch it and give it its own classes from react-multi-carousel library
Here is my code below and I ommited some imports and exports to focus attention on main parts
My Compilation component looks like this:
const compilation = ({ className, text, img }) => {
return (
<div className={`${className} ${classes.Compilation}`}>
<img src={img} alt={text} />
<div>
<h3>{text}</h3>
</div>
</div>
);
};
My Compilations component looks like this:
const compilations = ({ items, onClick }) => {
const compilationsView = items.map(item => {
return <Compilation key={item.id} onClick={() => onClick(item.id)} text={item.text} img={item.img} />;
});
return <React.Fragment>{compilationsView}</React.Fragment>;
};
SliderCarousel component looks like this
<Carousel
swipeable={true}
draggable={true}
showDots={true}
responsive={responsive}
ssr={true} // means to render carousel on server-side.
infinite={true}
autoPlay={true}
autoPlaySpeed={1000}
keyBoardControl={true}
customTransition="all .5"
transitionDuration={500}
containerClass="carousel-container"
removeArrowOnDeviceType={[ "tablet", "mobile" ]}
// deviceType={this.props.deviceType}
dotListClass="custom-dot-list-style"
itemClass="carousel-item-padding-40-px"
>
{items}
</Carousel>{" "}
Here is my pages/index.js file
<SliderCarousel items={<Compilations items={getBookCarouselItems()} />} />
And the function is:
{
id: 0,
img: "/static/images/main/books/slider-carousel/1.png",
text: "ТОП-10 романов"
},
{
id: 1,
img: "/static/images/main/books/slider-carousel/2.png",
text: "На досуге"
},
{
id: 2,
img: "/static/images/main/books/slider-carousel/3.png",
text: "Бестселлеры"
}
];
I hope that you can help me resolve this problem, cause I have no idea how to resolve this issue

Answer 1

actually this carousel makes a <li> for each element to manoeuvre the carousel effects as you can see in the inspect screenshot
in your code
const compilations = ({ items, onClick }) => {
const compilationsView = items.map(item => {
return <Compilation key={item.id} onClick={() => onClick(item.id)} text={item.text} img={item.img} />;
});
return <React.Fragment>{compilationsView}</React.Fragment>;
};
you are wrapping your map list in fragment and hence carousel got only one item as a component and hence one <li/>
so in order to work you'll have to pass the map list (i.e. array) of <Compilation />
const allCompilations = (items) => items.map(item => {
return <Compilation key={item.id} onClick={() => onClick(item.id)} text={item.text} img={item.img} />;
});
to you carousel as children
<SliderCarousel items={allCompilations(getBookCarouselItems())} />