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 i
ll 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
I forgot add this piece of code to the second Slider component
ref={c => (this.slider = c)}
P.S I`m sorry