Carousel Reactjs Component

Carousel - ReactJS Component

It renders a carousel component.

const Carousel = (props) => {
  const [active, setActive] = useState(0);
  const style = {
    carousel: {
      position: "relative",
    },
    carouselItem: {
      position: "absolute",
      visibility: "hidden",
      border: "2px solid red",
      padding: "10px 10px 10px 10px"
    },
    visible: {
      visibility: "visible"
    }
  };
  useEffect(() => {
    setTimeout(() => {
      const { items } = props;
      setActive((active + 1) % items.length);
    }, 2000);
  });
  const { items, ...rest } = props;
  return (
    <div style={style.carousel}>
      {items.map((item, index) => {
        const activeStyle = active === index ? style.visible : {};
        return React.cloneElement(item, {
          ...rest,
          style: {
            ...style.carouselItem,
            ...activeStyle
          }
        });
      })}
    </div>
  );
}

const items = [
    <div><img src="https://via.placeholder.com/468x60?text=Slide+One" /></div>,
    <div><img src="https://via.placeholder.com/468x60?text=Slide+Two" /></div>,
    <div><img src="https://via.placeholder.com/468x60?text=Slide+Three" /></div>
  ];

ReactDOM.render(<Carousel
  items={items}
/>, document.getElementById('root'));