Syncing React-Slick with Query Params

Question

I'm using React-Slick to render <Report /> components in a carousel. I would like to sync each <Report />'s reportId with query params.

For example, a user would be able to see a specific report by going to myapp.com/reports?id=1 and it would take them to that specific "slide".

The problem I'm having is that the report data is being loaded before the slides are initialized. I can't find any good examples of react-slick's onInit or onReInit.

Answer 1

Instead of using onInit or onReInit, I just utilized the initialSlide setting and used componentDidUpdate().

componentDidUpdate = (prevProps, prevState) => {

const queryParams = qs.parse(this.props.location.search)
if (prevProps.reports !== this.props.reports) {
  const sortedReports = this.sortReportsByDate(this.props.reports)

  this.setSlideIndex(sortedReports.findIndex(i => i.id === parseInt(queryParams.reportId, 10)))
  this.setQueryParams({
    reportId: this.sortReportsByDate(this.props.reports)[this.state.slideIndex].id
  })
}

if (prevState.slideIndex !== this.state.slideIndex) {
  this.setQueryParams({
    reportId: this.sortReportsByDate(this.props.reports)[this.state.slideIndex].id
  })
}

}

And the settings:

const settings = {
  ...
  initialSlide: reportsSortedByDate.findIndex(i => i.id === parseInt(queryParams.reportId, 10))
  ...
}

I hope someone finds this useful!