This is Slick Carousel using react-slick.

[![enter image description here][1]][1]

App.js

import "./styles.css";

import SlickCarousel from "./SlickCarousel";
import ComponentA from "./ComponentA";

export default function App() {
  const itemsA = [
    {
      id: 1,
      title: "Name 1",
      description: "Des 1"
    },
    {
      id: 2,
      title: "Name 2",
      description: "Des 2"
    }
  ];

  const slickCarouselSettings = {
    infinite: false,
    speed: 500,
    dots: true,
    arrows: true,
    slidesToShow: 3,
    slidesToScroll: 3
  };
  return (
    <div className="App">
      <SlickCarousel
        items={itemsA}
        settings={slickCarouselSettings}
        ItemComponent={ComponentA}
      />
    </div>
  );
}

SlickCarousel.jsx

import React from "react";
import Slider from "react-slick";

function SlickCarouselDefault(props) {
  const { items, settings, ItemComponent } = props;
  return (
    <div>
      <Slider {...settings}>
        {items.map((item) => {
          return (
            <div key={item.id}>
              <ItemComponent
                title={item.title}
                description={item.description}
              />
            </div>
          );
        })}
      </Slider>
    </div>
  );
}

export default SlickCarouselDefault;

ComponentA.jsx

import React from "react";

function ComponentA(props) {
  const { title, description } = props;
  return (
    <div className="nft-item">
      <h2>This is Component A</h2>
      <div style={{ marginTop: "24px" }} />
      <div className="title">{title}</div>
      <div style={{ marginTop: "12px" }} />
      <div className="description">{description}</div>
    </div>
  );
}

export default ComponentA;

It works fine but I want SlickCarousel.jsx to be reusable.
so I added ComponentB.jsx which require different props

ComponentB.jsx

import React from "react";

function ComponentB(props) {
  const { imgSrc, name } = props;
  return (
    <div>
      <h2>This is Component B</h2>
      <div style={{ marginTop: "10px" }} />
      <div className="title">{name}</div>
      <div style={{ marginTop: "20px" }} />
      <img src={imgSrc} alt={name} />
    </div>
  );
}

export default ComponentB;

and tried to use it for SlickCarousel.jsx.

App.jsx

import "./styles.css";

import SlickCarousel from "./SlickCarousel";
import ComponentA from "./ComponentA";
import ComponentB from "./ComponentB";

export default function App() {
  const itemsA = [
    {
      id: 1,
      title: "Name 1",
      description: "Des 1"
    },
    {
      id: 2,
      title: "Name 2",
      description: "Des 2"
    }
  ];

  const slickCarouselSettings = {
    infinite: false,
    speed: 500,
    dots: true,
    arrows: true,
    slidesToShow: 3,
    slidesToScroll: 3
  };

  const itemsB = [
    {
      id: 1,
      name: "Name 1",
      imgSrc: "imgSrc 1"
    },
    {
      id: 2,
      name: "Name 2",
      imgSrc: "imgSrc 2"
    }
  ];

  const slickCarouselSettingsB = {
    infinite: true,
    speed: 200,
    dots: true,
    arrows: true,
    slidesToShow: 1,
    slidesToScroll: 1
  };

  return (
    <div className="App">
      <SlickCarousel
        items={itemsA}
        settings={slickCarouselSettings}
        ItemComponent={ComponentA}
      />
      <SlickCarousel
        items={itemsB}
        settings={slickCarouselSettingsB}
        ItemComponent={ComponentB}
      />
    </div>
  );
}

Since in SlickCarousel.jsx, I hardcoded the props for ItemComponent, I am wondering how should I make it reusable.

SlickCarousel.jsx

import React from "react";
import Slider from "react-slick";

function SlickCarouselDefault(props) {
  const { items, settings, ItemComponent } = props;
  return (
    <div>
      <Slider {...settings}>
        {items.map((item) => {
          return (
            <div key={item.id}>
              <ItemComponent
                title={item.title}    //hardcoded
                description={item.description} //hardcoded
              />
            </div>
          );
        })}
      </Slider>
    </div>
  );
}

export default SlickCarouselDefault;

Codesnadbox
https://codesandbox.io/s/cocky-chaplygin-8oixz?file=/src/SlickCarousel.jsx:0-529 [1]: https://i.stack.imgur.com/wdyKy.png

CodePudding user response：

You could try to the destructure the props rather than hard coding.

<ItemComponent {...item} />

CodePudding user response：

You could make the ItemComponent into its own mini component so it does not rely on the SlickCarousel Component.