Why my react `Carousel` does not render properly?

Question

So I'm using react-multi-carousel and it looks like this:

Carousel component:

import Carousel from 'react-multi-carousel';

const Container = ({movies}: {movies:MovieResults | null}) => {

  const responsive = {
    desktop: {
      breakpoint: { max: 3000, min: 1024 },
      items: 6,
      slidesToSlide: 3 // optional, default to 1.
    },
    tablet: {
      breakpoint: { max: 1024, min: 464 },
      items: 4,
      slidesToSlide: 4 // optional, default to 1.
    },
    mobile: {
      breakpoint: { max: 464, min: 0 },
      items: 3,
      slidesToSlide: 3 // optional, default to 1.
    }
  };

  const few_movies = movies?.results.slice(1,10);

return (
    <div>
      {movies?.results ?
                <Carousel
                swipeable={true}
                draggable={false}
                //showDots={true}
                responsive={responsive}
                ssr={true} // means to render carousel on server-side.
                //infinite={true}
                // autoPlaySpeed={2000}
                keyBoardControl={true}
                customTransition="all .5"
                transitionDuration={500}
                containerClass="carousel-container"
                removeArrowOnDeviceType={["tablet", "mobile"]}
                dotListClass="custom-dot-list-style"
                itemClass="carousel-item-padding-40-px"
                >
                    {movies?.results?.map((movie) =>
                      <Link to={`/movie/${movie.id}`} replace style={{ textDecoration: 'none' }}><MovieItem movie={movie} key={movie.id}/></Link>
                    )}
                </Carousel>
                :
                <div>Loading...</div>
      }
    </div>
  )
} 

Styles:

.container{
    @include flex(center, center);
    position: relative;
    flex-wrap: wrap;
    width:100%;
    height:100%;
    z-index: 1;
}

What it looks like in a parent component:

<div className="section mb-3">
            <div className="section__header mb-2">
              <h2 style={{color:"#fff"}}>Now playing movies</h2>
              <Link to="/playing" className="movies_link">Explore all</Link>
            </div>
            {playing ? <Container movies={playing}/> : <div>Loading</div>}
</div>

But I have a problem, when I open the page it can just randomly render in some weird way, here's the screenshot:

It just goes down vertically and other elements are below too, it doesn't happen everytime, but it can happen randomly. So I want to figure out how can I always it in a proper way.

Answer 1

I don't know actually what causes your problem but maybe i can point out things that can be helpful if they changes:

1. When you write responsive object i think different views have to have different breakpoint values. Like:

     {
        desktop: {
          breakpoint: { max: 3000, min: 1024 }
        },
        tablet: {
          breakpoint: { max: 1023.98, min: 464}
        }
     }

2. Instead of ternary operator, try using simple && operator:

    {playing && <Container movies={playing}/>}
    {!playing && <div>Loading</div>}

3. While mapping give key to the most outer element:

    {movies?.results?.map((movie) =>
                      <Link 
                       to={`/movie/${movie.id}`} 
                       key={movie.id}
                       replace 
                       style={{ textDecoration: 'none' }}
                       >
                         <MovieItem movie={movie} />
                      </Link>
     )}

Answer 2

1. First thing to note about your weird behaviour is that you are giving the wrong elements the key prop. Your Link (Outer most Element) component should have the key prop:

{movies?.results?.map((movie) =>
    <Link to={`/movie/${movie.id}`} key={movie.id}><MovieItem movie={movie}/></Link>
)}

2. You don't specify where you are including that flex css helper thing? My assumption is that you are then trying to use:

.carousel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  flex-wrap: wrap;
  gap: 10px;
  width:100%;
  height:100%;
  z-index: 1;
}

which you should change to:

.carousel-container{
  position: relative;
  width:100%;
  height:100%;
  z-index: 1;
}

3. You may not be importing the css for react-multi-carousel :

import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';

In short, I am pretty sure its the flex styling on your Carousel Container. Please also consider you are styling the container with flex: wrap, which is possibly causing your items to stack.

Also on a smaller screen you may actually only want to display a single item.

 const responsive = {
    desktop: {
      breakpoint: { max: 3000, min: 1024 },
      items: 6,
      slidesToSlide: 3 // optional, default to 1.
    },
    tablet: {
      breakpoint: { max: 1024, min: 464 },
      items: 4,
      slidesToSlide: 4 // optional, default to 1.
    },
    mobile: {
      breakpoint: { max: 464, min: 0 },
      items: 1,
      slidesToSlide: 1 // optional, default to 1.
    }
  };

Answer 3

I believe that you forgot to add import 'react-multi-carousel/lib/styles.css'; to your top-level file. Eg: _app.tsx for NextJS.