tiny-slider-react ref property throw an error

Question

I'm using next.js to build a website, I need to create a carousel to show my project. I use tiny-slider-react to create my carousel everything it's ok but I need my own custom to change the carousel item in this link it says to add ref to TinySlider then I can use my own button but when I add ref I get an error in my console.

Error:

app-index.js:32 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()

So I wrapped my component whit React.forwardRef() but nothing changes

"use client";
import dynamic from "next/dynamic";
const TinySlider = dynamic(() => import("tiny-slider-react"));
import "tiny-slider/dist/tiny-slider.css";
import { useEffect, useState } from "react";
import Link from "next/link";
import Image from "next/image";

function ProjectSlideshow(props) {
  const [mount, setMount] = useState(false);

  useEffect(() => {
    if (typeof window === "object") {
      setMount(true);
    }
  }, []);

  const settings = {
    lazyload: true,
    nav: false,
    mouseDrag: true,
    loop: true,
    items: 1,
    gutter: 20,
    controls: false,
    // autoplay: true,
    arrowKeys: true,
    autoplayHoverPause: true,
    autoplayButtonOutput: false,
    speed: 250,
    autoplayTimeout: 2500,
    autoplayDirection: "backward",
  };

  const Content = null;

  return (
    <div className="row p-slide">
      <div className="col-md-4 col-12 position-relative bg-light"></div>
      <div className="col-md-8 pe-0 col-12 position-relative">
        <div className="ratio ratio-21x9 bg-light">
          {mount && (
            <>
              <TinySlider settings={settings} ref={(e) => console.log(e)}>
                {props.data.map((item) => (
                  <div className="project-slideshow-item" key={item.id}>
                    <div className="col-12">
                      <Link href="#">
                        <div className="ratio ratio-21x9 position-relative news-cover-holder">
                          <Image
                            src={item.img}
                            alt={item.title}
                            fill="cover"
                            style={{ objectFit: "cover" }}
                          />
                          <div className="project-info p-5">
                            <h2 className="mb-0">{item.title}</h2>
                            <h4>{item.year}</h4>
                          </div>
                        </div>
                      </Link>
                    </div>
                  </div>
                ))}
              </TinySlider>
              <div className="carousel-next-btn">
                <button
                  type="button"
                  className="carousel-btn-next"
                  onClick={() => {}}
                >
                  <span></span>
                </button>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

export default ProjectSlideshow;

tiny-slider-react ref property throw an error

0 Answers0