javascriptreactjsreact-slick

React slick slider doesn`t pass props


I have a couple of components with Slider. In the first component i receive props. But in the second component i don`t receive props. Below code of my components:

import React, { Component } from "react";
import Slider from "react-slick";

export default class PartersSlider extends Component {
  constructor(props) {
    super(props);
    this.next = this.next.bind(this);
    this.previous = this.previous.bind(this);
  }
  next() {
    this.slider.slickNext();
  }
    previous() {
    this.slider.slickPrev();
  }
  render() {
    const settings = {
      slidesToShow: 5,
      slidesToScroll: 1,
      arrows: true,
      infinite: true,
      responsive: [{
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: true
        }
      }, {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      }, {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }]
    }
    return (
      <div>
        <div className="col-md-12 mb-4 d-flex justify-content-between">

        </div>
      </div>
    );
  }
}

In this example ill receive props if ill make like this console.log(this.slider);

And this second component

import React, { Component } from "react";
import Slider from "react-slick";

export default class SliderOfComments extends Component {
  constructor(props) {
    super(props);
    this.next = this.next.bind(this);
    this.previous = this.previous.bind(this);
  }
  next() {
    console.log(this.slider);
    // this.slider.slickNext();
  }
  previous() {
    // this.slider.slickPrev();
  }
  render() {
    const settings = {
      arrows: true,
      slidesToShow: 2,
      infinite: true,
      slidesToScroll: 1,
    }
    return (
      <div className="row">
       // code
      </div>
    );
  }
}

And here this.slider returning to me undefined


Solution

  • I forgot add this piece of code to the second Slider component

    ref={c => (this.slider = c)}
    

    P.S I`m sorry