React-slick: What's the 'react' way of accessing the active slides?

[taichatha]

I want to change the width of an active slide based on a class it has, but I first need to grab it. How would you recommend I safely go about this? I tried doing refs, but that's apparently not safe. And I am passing my divs/slides as props. So basiaclly how do I go into and access the active slides.

[bvasko]

You probably figured this out already - but use the beforeChange prop

_onChange: function( currentSlide, nextSlide ) { }

[akiran]

Yes, you can use beforeChange or afterChange methods for this usecase

[joebanks10]

I'm having trouble figuring out how to access to current slide element. The current slide index is passed into afterChange, but how do I use that to get a reference to the current slide element? I want to set focus on it.

[HelKyle]

@joebanks10 maybe you can make it by native javascript, like this

onChange () => {
    document.querySelector('.slick-current').focus();
}

[nikobenedikt]

Has anyone found a correct solution to this problem? How do we access the elements within the current Slide without using querySelector since it's considered bad practice ??? Maybe with Refs? Please help.

[jamesryan-dev]

+1 for solution - I would like to know which slide is active via a prop maybe?