Antd Carousel transferring from class component into functional

Question

I have following code

   class Gallery extends Component {
      state = {
        media: null,
        nav: null
      };

     componentDidMount = () => {
       this.setState({
        media: this.media,
        nav: this.nav
       });
    };

     render() {
      return (
       <>
         {
            this.media = carousel;
          }}
        >
          
            1
          
          
            2
          
          
            3
          
        
         (this.nav = carousel)}
        >
          
            1
          
          
            2
          
          
            3
          
        
      
     );
    }
   }

It was written based on class component, please help me to transfer it into functional component

I tried like this but it's not working correctly. When we changing thumbnail gallery the main gallery didn't changed. If I am changing thumbnail or with buttons from 1 to 2 the main slide should also change from 1 to 2. But it not changing

    const Gallery = () => {
      const [media, setMedia] = useState(null);
      const [nav, setNav] = useState(null);
      const carousel = useRef(null);

      const handleNext = () => {
        carousel.current.next();
      };

      const handlePrev = () => carousel.current.prev();

     useEffect(() => {
       setMedia(null);
       setNav(null);
     }, [media, nav]);
     return (
       <>
         
        
          1
        
        
          2
        
        
          3
        
      

      
      
      
        
          1
        
        
          2
        
        
          3
        
       
      
     );
    };

Please help me to resolve that problem, thanks :)

user_13567807 · Answer

I have updated the on this link , or also you can see the below code

import React, { Component, useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Carousel } from "antd";

const Gallery = () => {
  const mediaRef = React.useRef(null);
  const navRef = React.useRef(null);

  const onChange = (currentSlide) => {
    console.log(currentSlide);
    mediaRef.current.goTo(currentSlide, false);
  };

  return (
    
      
        
          1
        
        
          2
        
        
          3
        
        
          4
        
      
       (navRef.current = carousel)}
        afterChange={onChange}
        swipeToSlide={true}
        touchThreshold={50}
        focusOnSelect={true}
      >
        
          1
        
        
          2
        
        
          3
        
        
          4
        
      
    
  );
};

ReactDOM.render(, document.getElementById("container"));

Antd Carousel transferring from class component into functional

1 Answers