title: React - carousel
body: <p>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. </p>
  
  <p>I want to map trough array and set index to data-slider property and later read this with e.target.dataset.slider and change in method changeSlider() to this value in data-slider property.</p>
  
  <p>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. </p>
  
  <pre><code>&lt;div className="circle-container"&gt;
            {this.props.images.map((el, index) =&gt; {
              return (
                &lt;button
                  key={index}
                  onClick={this.setActiveSlide}
                  className="circle-empty"
                  data-slider={index}
                &gt;
                  &lt;i className="far fa-circle" /&gt;
                &lt;/button&gt;
              );
            })}
          &lt;/div&gt;
  </code></pre>
  
  <p>Method:</p>
  
  <pre><code>setActiveSlide = e =&gt; {
      let slider = e.target.dataset.slider;
      this.setState({
        slider: slider
      });
    };
  </code></pre>
  
  <p>Call setActiveSlide method onClick gave me this result:</p>
  
  <p><a href="https://i.stack.imgur.com/ATMOQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ATMOQ.png" alt="enter image description here"></a></p>