React multi carousel renders items wrongly

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

score 0 · Answer 1 · answered Dec 28 '21 at 15:33

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())} />

React multi carousel renders items wrongly

1 Answers1