title: Here implemented react-bootstrap-range-slider in react js when i use this in multiple time its problem in state handling any idea?
body: <p>HERE IS CODE SANDBOX LINK <a href="https://codesandbox.io/s/quiet-sun-ykm5v?file=/src/App.js" rel="nofollow noreferrer">CLick Here</a></p>
  <p>Here is the range slider link <a href="https://www.npmjs.com/package/react-bootstrap-range-slider" rel="nofollow noreferrer">Click Here</a> which i used in react component</p>
  <p>i have a multiple data like this</p>
  <pre><code>    {
          &quot;srno&quot; : &quot;1&quot;,
          &quot;name&quot; : &quot;title&quot;,
          &quot;description&quot; : &quot;desc&quot;,
          &quot;slider&quot; : &quot;0&quot;
      },
      {
          &quot;srno&quot; : &quot;2&quot;,
          &quot;name&quot; : &quot;title&quot;,
          &quot;description&quot; : &quot;desc&quot;,
          &quot;slider&quot; : &quot;1&quot;
      },
  </code></pre>
  <p>Here is my component map handle code</p>
  <pre><code>var returnSize = data.length &gt; 0
      &amp;&amp; data.map((item, i) =&gt; {
          return (
              &lt;&gt;
                  &lt;div className=&quot;col-md-8 mgt-10&quot;&gt;
                          &lt;div className=&quot;leftblocks&quot;&gt;
                              &lt;span className=&quot;sr-no&quot;&gt;{ item.srno }&lt;/span&gt;
                              &lt;h3&gt;{item.name}&lt;/h3&gt;
                              &lt;p&gt;{item.description}&lt;/p&gt;
                              &lt;RangeSlider
                                  value={item.slider}
                                  max={1}
                                  onChange={changeEvent =&gt; getRangeSliderValue(changeEvent.target.value,item.srno)}
                                  // onChange={changeEvent =&gt; setValue(changeEvent.target.value)}
                              /&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;col-md-4 rightblocks mgt-10&quot;&gt; &lt;/div&gt;
              &lt;/&gt;
              );
  }, this);
  </code></pre>
  <p>When i change slider then i want to update state i do but its not working</p>
  <pre><code>const getRangeSliderValue = (value,srno) =&gt; {
      var newData = [];
      for (let i = 0; i &lt; data.length; i++) {
          if (data[i].srno === srno) {
              data[i].value = value;
          }
          newData.push(data[i]);
      }
  
      setData(newData);
      // setData({...data,srno : value});
  }
  </code></pre>