react-slick slickNext method - "Uncaught TypeError: Cannot read property 'slider' of undefined"

Question

I'm using the react-slick carousel with the Green Sock animation tool, and I've gotten the slider and animations to work. The problem now is calling slickNext method when the animation ends on a slide. I keep getting this error whether I use refs or not (but my "test" is working and showing in the console). The github documentation for this method is a bit meager and confusing, and I haven't found any similar situations to mine that I can use as reference. How can I access this method?

import React, { Component } from "react";
import Helmet from "react-helmet";
import AnimationStory1 from "../../components/Animation/AnimationStory1";
import AnimationStory2 from "../../components/Animation/AnimationStory2";
import AnimationStory3 from "../../components/Animation/AnimationStory3";
var Slider = require("react-slick");

export default class IntroStory extends Component {

  constructor (props) {
    super(props);
    this.state = {};
  }

  nextSlide () {
    console.log("test");
    this.refs.slider.slickNext();
  }

  render () {
//These are GreenSock animation instances
    var timeline1 = new TimelineLite({onComplete: this.nextSlide});
    var timeline2 = new TimelineLite();
    var timeline3 = new TimelineLite();

//These are settings for the react-slick slider
    var settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
//      slide: true,
      swipe: true,
      accessibility: true,
      arrows: false,
      beforeChange: function () {
        timeline1.restart();
        timeline2.restart();
        timeline3.restart();
      }
    };

    return <div>
      <Helmet title="Welcome to We Vote" />
      <div className="container-fluid well u-gutter__top--small fluff-full1 intro-story">
        <Slider ref="slider" {...settings}>
          <div key={1}><AnimationStory1 timeline1={timeline1}/></div>
          <div key={2}><AnimationStory2 timeline2={timeline2}/></div>
          <div key={3}><AnimationStory3 timeline3={timeline3}/></div>
          <div key={4}><p>This will be an image</p></div>
         </Slider>
      </div>
    </div>;
  }
}

score 0 · Accepted Answer · answered Jan 09 '17 at 02:35

Bind your method to ensure the context this is taken care of:

 render () {
//These are GreenSock animation instances
    var timeline1 = new TimelineLite({onComplete: this.nextSlide.bind(this)});
    var timeline2 = new TimelineLite();
    var timeline3 = new TimelineLite();

When you just pass, var timeline1 = new TimelineLite({onComplete: this.nextSlide}) you are effectively just concentrating on passing the callback, but the method nextSlide uses the this context and when the callback is invoked, you need to ensure that this has the refs in them to invoke the slider. Read more here

react-slick slickNext method - "Uncaught TypeError: Cannot read property 'slider' of undefined"

1 Answers1