Define callback ref TypeScript and react-slick library

Question

I'm building a React app using TypeScript. I'm using React-Slick's carousel.

I'm trying to programmatically change the slide of the carousel. Therefore I followed the documentation and tried to create a ref for the Slider. My component is like this:

import React from 'react';
import Resur from './Resur'
const Slider = require("react-slick").default;

export interface Item {
title: string;
restur: Rest[];
}

export interface Rest {
name: string;
online: boolean;
}

interface AppRefs {
slider: any;
}

class Section extends React.Component<{ item: Item }> {
 private slider: any;

 constructor(props: any) {
    super(props);
    this.slider = null;
    this.setRef = element => {
        this.slider = element;
    };
}
renderArrows() {
  return (
    <div className="slider-arrow">
    <button
      className="arrow-btn prev"
      onClick={() => this.slider.slickPrev()}
    >
        <i className="fa fa-chevron-left"></i>
    </button>

    <button
      className="arrow-btn next"
      onClick={() => this.slider.slickNext()}
    >
        <i className="fa fa-chevron-right"></i>
    </button>
  </div>
);
};
render() {
const settings = {
  infinite: true,
  slidesToShow: 3
};
  var rests = this.props.item.restur.map(function(rest, index) {
    return (
      <Resur rest={rest} key={index} />
    )
  });
return(
  <div>
      <h4 className="section-title text-center">{this.props.item.title}</h4>
      <hr></hr>
      {this.renderArrows()}
      <Slider ref={this.setRef} {...settings}>
        {rests}
      </Slider>
  </div>
  )
 }
}
export default Section

When I defined the callback ref in my component like this, there is an error which says: "Property 'setRef' does not exist on type 'Section'". How can I define my callback ref in TypeScript for react-slick library?

Nicholas Tower · Accepted Answer · 2021-01-23T14:50:25.480

1

To add properties to a typescript class, you need to define their types in the body of the class.

class Section extends React.Component<{ item: Item }> {
 private slider: typeof Slider | null; // <---- improved this type
 private setRef: (element: typeof Slider | null) => void; // <---- added this

 constructor(props) {
    super(props);
    this.slider = null;
    this.setRef = element => {
        this.slider = element;
    };
}

edited Jan 23 '21 at 14:50

answered Jan 23 '21 at 14:46

Nicholas Tower

72,740
7
86
98

Thanks for your answer but there is an error `'Slider' refers to a value, but is being used as a type here. Did you mean 'typeof Slider'?` for those two lines I added. – Tjax Jan 23 '21 at 14:49
The solution proposed by the error message seems correct to me. – Nicholas Tower Jan 23 '21 at 14:50
If that doesn't work, perhaps this Slider component is exposing a different object than itself as its ref. If you're in VSCode, you can mouse over the `ref` in `ref={this.setRef}`, and it will tell you what types it's dealing with, and then you can copy that type into yours – Nicholas Tower Jan 23 '21 at 14:54
I am using Sublime and I do not know hat type it is. – Tjax Jan 23 '21 at 14:55
I changed it to 'any' and it works but how can I know what type is it? ANyway I accept your answer. – Tjax Jan 23 '21 at 14:59
@Tjax Give yourself a boost my using an IDE that can interact with the TypeScript type-system (VSCode and TypeScipt work very nicely indeed and *compatibility with latest TS version* is well maintained), or installing the [right plugin](https://packagecontrol.io/packages/TypeScript) to make this happen in your current IDE. You're missing out on a huge part of the benefit of TypeScript without it. – spender Jan 23 '21 at 15:00
Thanks I installed it – Tjax Jan 23 '21 at 15:03

Define callback ref TypeScript and react-slick library

1 Answers1