How to use renderArrowPrev in React Responsive Carousel to implement next and previous functionality?

Question

I am using https://www.npmjs.com/package/react-responsive-carousel I am able to render desired image using renderArrowPrev and renderArrowNext. but I am not able add functionality to it.

    const Swiper = () => {
      const [hasNext, setHasNext] = React.useState(true);
      const [hasPrev, setHasPrev] = React.useState(true);
      const [labelPrev] = React.useState("PREVIOUS");
      const [labelNext] = React.useState("NEXT");

      const clickHandler = () => {
        console.log("clickHandlerCalled");
      };

      return (
        <Carousel
           renderArrowPrev={(clickHandler, hasPrev, labelPrev) => (
            <img
              style={{ height: "30px", width: "30px" }}
              src={`assets/img/previous.svg`}
            />
          )}
          renderArrowNext={(clickHandler, hasNext, labelNext) => (
            <img
              style={{ height: "30px", width: "30px" }}
              src={`assets/img/next.svg`}
           />
         )}
         onChange={onChange}
         renderThumbs={() => null}
        >
          {getSlides()}
        </Carousel>
      );
    };

Even after passing first parameter to renderArrowNext, clickHandler is not getting called.

Answer 1

In renderArrowPrev and renderArrowNext, the parameters (clickHandler, hasPrev, labelPrev) are provided to you by the carousel library, you should use these items instead of coding them yourself:

const Swiper = () => {
      return (
        <Carousel
           renderArrowPrev={(clickHandler, hasPrev, labelPrev) =>
                hasPrev && (
                    <button onClick={clickHandler}>
                        <img 
                            style={{ height: "30px", width: "30px" }}
                            src={`assets/img/previous.svg`} />
                    </button>
                )
            }
            renderArrowNext={(clickHandler, hasNext, labelNext) =>
                hasNext && (
                    <button onClick={clickHandler}>
                        <img
                            style={{ height: "30px", width: "30px"}}
                            src={`assets/img/next.svg`} />
                    </button>
                )
            }
         renderThumbs={() => null}
        >
          {getSlides()}
        </Carousel>
      );
    };