Problem with splitting one component into smaller ones React and TypeScript

Question

**I have problem with react-swipper when i'm trying to separate it into smaller components. Below is my full code from one component which i want to split from this:

import { Swiper } from 'swiper/react/swiper-react';
import { SwiperSlide } from 'swiper/react/swiper-react';
import { Pagination } from 'swiper';
import 'swiper/swiper.scss';
 <div className={styles['categories-showcase']}>
          <Swiper
            slidesPerView={4}
            spaceBetween={200}
            grabCursor={true}
            pagination={{
              clickable: true,
            }}
            modules={[Pagination]}
          >
            {categories.map(category => {
              return (
                <SwiperSlide>
                  <div className={styles['categories-showcase__item']}>
                    <img
                      className={styles['swiper-image']}
                      src={category.image}
                      alt={category.name}
                    />
                  </div>
                </SwiperSlide>
              );
            })}
          </Swiper>
      </div>

into this:

   <SwiperSlider>
        {categories.map(c => (
          <Slide key={c.id} {...c} />
        ))}
      </SwiperSlider>

And here what i've tried: SwiperSlider - pass multiple slides as children of JSX.Element[]

 import React from 'react';
    import { Swiper, SwiperSlide } from 'swiper/react/swiper-react';
    import { Pagination } from 'swiper';
    import 'swiper/swiper.scss';
    import styles from './swiper-slider.module.scss';
    
    interface IProps {
      children: JSX.Element[];
    }
    
    const SwiperSlider = ({ children }: IProps) => {
      return (
        <div className={styles['showcase']}>
          <Swiper
            slidesPerView={4}
            spaceBetween={200}
            grabCursor={true}
            pagination={{
              clickable: true,
            }}
            modules={[Pagination]}
          >
            {children}
          </Swiper>
        </div>
      );
    };
    
    export default SwiperSlider;

Slide which takes category as prop

import { ICategory } from 'models/category';
import React from 'react';
import { SwiperSlide } from 'swiper/react/swiper-react';
import 'swiper/swiper.scss';
import styles from './slide.module.scss';

const Slide = (category: ICategory) => {
  return (
    <SwiperSlide>
      <div className={styles['showcase-item']}>
        <img className={styles['swiper-image']} src={category.image} alt={category.name} />
      </div>
    </SwiperSlide>
  );
};

export default Slide;

When i'm doing it this way, then my swiper doesn't work properly. It is displayed in one vertical row, when it should be displayed horizontally. Could you tell me what i'm doing wrong here? [![enter image description here][1]][1] [1]: https://i.stack.imgur.com/kMTMq.png**

Each component has to take an object of props. `const Slide = ({category}: {category: ICategory}) => ` — Aluan Haddad, Feb 17 '22 at 17:02

score 0 · Answer 1 · answered Feb 17 '22 at 17:01

I think you should iterate over your array on SwiperSlider and render your custom Slide which export SwiperSlide

const SwiperSlider = ({ children }: IProps) => (
  <div className={styles['showcase']}>
    <Swiper
      slidesPerView={4}
      spaceBetween={200}
      grabCursor={true}
      pagination={{
        clickable: true,
      }}
      modules={[Pagination]}
    >
      {categories.map((category) => <Slide category={category} /> )}
    </Swiper>
  </div>
);

export default SwiperSlider;

it doesn't change anything aswell. I think this is something related to "SwiperSlide" component itselft. It must be inside the same component as "Swiper".. — I3artosz, Feb 17 '22 at 18:34

Problem with splitting one component into smaller ones React and TypeScript

1 Answers1