Events do not bind to elements cloned for loop

[Krak86]

Events do not bind to elements cloned for loop. When I set loop="true" the slides are cloned in order to create the infinite loop. This appears to happen after the component has rendered, and as a result the cloned elements are not bound to the click event.

Here is a simple example: https://codesandbox.io/s/test-tiny-slider-react-forked-rmxcl

If you click previous to view the cloned "last" slide, its button will not be clickable. Is there a way to bind events to the cloned elements after the slider has initiated without resorting to DOM manipulation?

[jechav]

No, it's not way to bind this events to the DOM element, the workaround I used last time was to capture the click of the slide, find the parent, count all slide elements and calculate the real index of the clicked slide even if it was a clone.

// we have a looped index so the slide are duplicated
// 5 tiemes, ej: with itemsCount: 4, in total we have 20 slides
// and every slide has his own index regarding the looped count of
// items (20), but we need the real index regarding the original itemsCount
// @params {number} index - looped index
// @params {number} itemsCount - real amount of items
// @returns {number} - real index
const getRealIndex = (index, itemsCount) => {
  let rindex = index;
  while (rindex >= itemsCount) {
    rindex -= itemsCount;
  }
  return rindex;
};