title: How to remove table row on click in reactjs?
body: <p>This is an addon to my previous question; I am trying to delete a specific row when the button is clicked, however everytime the button is clicked it deletes the next table row instead of itself. Here is what it looks like with a <a href="https://streamable.com/uqn63a" rel="nofollow noreferrer">video</a>. The current code I am using to perform this action is:</p>
  <pre><code>const [shop, setShop] = useState([]);
  
  const singleDelete = (d) =&gt; {
          const newArr = [...shop];
          const index = shop.findIndex((contact) =&gt; contact.id === d);
          newArr.splice(index, 1);
          setShop(newArr);
  }
  
  return (
          &lt;div className=&quot;content&quot;&gt;
           &lt;Table&gt;
              &lt;tbody id=&quot;tbid&quot;&gt;
                      
                        {(shop.map((s,i) =&gt; (
                          &lt;tr key={`${s+i}`} id={i} value={`${i}Row`}&gt;
                          &lt;td&gt;{i}&lt;/td&gt;
                          &lt;td&gt;{profil[i]}&lt;/td&gt;
                          &lt;td&gt;{s}&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;{acc[i]}&lt;/td&gt;
                          &lt;td&gt;
                          &lt;Button className=&quot;btn-round btn-icon&quot; color=&quot;danger&quot; size=&quot;sm&quot; type=&quot;submit&quot; onClick={singleDelete}&gt;
                                &lt;i className=&quot;icon-simple-delete&quot;/&gt;
                            &lt;/Button&gt;
                          &lt;/td&gt;
                          &lt;/tr&gt;
                        )))}
                      &lt;/tbody&gt;    
           &lt;/Table&gt;
          &lt;div&gt;
  )
  </code></pre>
  <p>I have tried using
  <code>setShop(shop.filter((_, index) =&gt; index !== d));</code>
  But the results are still the same.</p>