Invoke APIs on navigation click based on the `slideType` or `selectedIndex`

[govindthakur25]

I want to invoke different APIs, on navigation click, based on the selected index or slideType. Is there a way to achieve this? I am using an external button to control the slide navigation, below is the sample code.

import React, { Children, useState } from "react";

import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";

import Icon from "../Icon";
import { arrowStyles } from "../styled-components/Carousel.styled";

export const GroupChartCarousel = (props) => {
  // Slide index is zero based, and children count returns exact number of children, so we must subtract 1 from it
  const totalChildren = Children.count(props.children) - 1;
  const [currentSlide, setCurrentSlide] = useState(0);

  const handleChange = (selectedIndex) => {
    if (currentSlide !== selectedIndex) {
      setCurrentSlide(selectedIndex);
    }
  };

  const next = () => {
    if (currentSlide < totalChildren) {
      setCurrentSlide(currentSlide + 1);
    }
  };

  const previous = () => {
    if (currentSlide > 0) {
      setCurrentSlide(currentSlide - 1);
    }
  };

  return (
    <>
      {currentSlide > 0 && (
          <button
            type="button"
            onClick={previous}
            style={{ ...arrowStyles, left: -20 }}
          >
            <Icon
              name="carousel_navigator"
              size="70px"
              margin="-13px 0 0 -21px"
            />
          </button>
      )}
      {totalChildren !== currentSlide && (
          <button
            type="button"
            onClick={next}
            style={{ ...arrowStyles, right: -20 }}
          >
            <Icon
              name="carousel_navigator"
              transform="rotate(180deg)"
              size="70px"
              margin="-20px 0 0 -20px"
            />
          </button>
      )}
      <Carousel
        showThumbs={false}
        showIndicators={false}
        selectedItem={currentSlide}
        showArrows={false}
        onChange={handleChange}
        showStatus={false}
      >
        {props.children}
      </Carousel>
    </>
  );
};