Skip to content

React – carousel

I’m creating my own carousel and I want to add circles navigation on the bottom of slider. I am fetching data from mongoDb (3 pictures) and load them in App component and passing via props to Carousel component.

I want to map trough array and set index to data-slider property and later read this with and change in method changeSlider() to this value in data-slider property.

I have weird problem, when I click on this buttons circles sometimes I have value === 2, 0, 1 but sometimes I’m getting undefined and my slider don’t know which slider make active.

<div className="circle-container">
          {, index) => {
            return (
                <i className="far fa-circle" />


setActiveSlide = e => {
    let slider =;
      slider: slider

Call setActiveSlide method onClick gave me this result:

enter image description here


Your event is probably firing from the icon sometimes simply change the event target to currentTarget

setActiveSlide = e => {
  // I've changed this variable to const because our data-slider is not
  // going to change.
  const slider = e.currentTarget.dataset.slider;
  // Using es6 object property shorthand if we have both
  // the same variable name and field we can simply pass in just the
  // field name and it will auto convert it for us