title: Maintaining index of multiple react-slick
body: <p>I am making a react project. I have a page where have to use multiple react-slick elements. I want to maintain index of each slick element. Currently I am doing this</p>
  
  <pre><code>render() {
              var settings = {
              arrows: true,
              infinite: false,
              speed: 500,
              slidesToShow: 1,
              slidesToScroll: 1,
              afterChange: function(currentSlide){
              this.setState({
              currentSlide: currentSlide
          })
              console.log(currentSlide);
          }.bind(this)
          };
              return (
  
              &lt;div className="main-wrapper"&gt;
  
              {/*carousel responsive1*/}
  
              {this.state.users.map((item,i)=&gt;{
                  return  &lt;div className="main-wrapper-mobile"&gt;
                      &lt;div className="carousel responsive1"&gt;
                          &lt;div className="mask"&gt;
                              {/*slideset */}
                              &lt;div className="slideset"&gt;
                                  {/*slide*/}
  
                                  &lt;Slider {...settings}&gt;
                                      {item.activities.map((item1,i)=&gt;{
                                          return &lt;div className="slide"&gt;
                                              &lt;div className="content__item d-flex"&gt;
  
                                                  &lt;div className="content__photo"&gt;
                                                      &lt;img className="content__img" src={item.image_url}/&gt;
                                                  &lt;/div&gt;
                                                  &lt;div className="article"&gt;
                                                      &lt;p className="article__text"&gt;{item.comment_text}&lt;/p&gt;
                                                      &lt;ul className="article__controls"&gt;
                                                          &lt;li className="article__control-item"&gt;&lt;a href="#"&gt;visual &lt;i
                                                              className="fa fa-eye" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                                                          &lt;li className="article__control-item"&gt;&lt;a href="#"&gt;text &lt;i
                                                              className="fas fa-comment-dots"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                                                          &lt;li className="article__control-item"&gt;&lt;a href="#"&gt;edited &lt;i
                                                              className="fas fa-edit"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                                                      &lt;/ul&gt;
                                                      &lt;div className="article__icon"&gt;
                                                          &lt;a href="#" className="article__icon--blue"&gt; &lt;i
                                                              className="fa fa-check-circle" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
                                                          &lt;a href="#" className="article__icon--gray"&gt;&lt;i
                                                              className="fa fa-minus-circle" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      })}
  
                                  &lt;/Slider&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  </code></pre>
  
  <p>Brief explaination of above code:</p>
  
  <p>I have an array of users. Each user is assigned a slider. That is why I am mapping the users array and rendering  in each mapping. </p>
  
  <p>Currently the "currentSlide" parameter in "settings" sets the state "currentSlide" to whatever currentSlide is. The problem is the same state changes for all the sliders. There is no way to keep track of which slider is getting slide. I should be able to change or maintain slider and it's corresponding index. How should I do it?</p>