title: Delete Table Row not working properly with search bar
body: <p>i'm new to reactjs and i'm trying to make a table that shows the information from a array of objects and have a button of delete and an input to search among the users. The delete button is working correctly when i'm not searching anything, but when i'm searching it doesn't delete the corretly row, and deletes only the first one. I see that it is because the arrays that show the table are different with and without the search being used but I don't know how to make it work.</p>
  <p>this is the component of the table:</p>
  <pre><code>import { formatDate } from &quot;../../utils/formatDate&quot;;
  import &quot;./table.css&quot;;
  import { useState } from &quot;react&quot;;
  
  function Table(props) {
    const { headerData, bodyData, type, removeItem} = props;
    const isUser = type === &quot;user&quot;;
  
    const buildTableItems = () =&gt; {
      return bodyData.map((item, index) =&gt; (
        &lt;tr className=&quot;data-tr&quot;&gt;
          &lt;td&gt;{item.name}&lt;/td&gt;
          &lt;td&gt;{item.email}&lt;/td&gt;
          &lt;td&gt;{item.occupation}&lt;/td&gt;
          &lt;td&gt;{formatDate(item.birthday)}&lt;/td&gt;
          &lt;td&gt;
            &lt;button className=&quot;delete-button&quot; onClick={() =&gt; removeItem(index)}&gt;
              Delete
            &lt;/button&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      ));
    };
    return (
      &lt;div className=&quot;user-data&quot;&gt;
        &lt;table className=&quot;user-table&quot;&gt;
          &lt;thead&gt;
            &lt;tr className=&quot;data-th&quot;&gt;
              {headerData.map((headerTable) =&gt; (
                &lt;th &gt;{headerTable}&lt;/th&gt;
              ))}
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;{buildTableItems()}&lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    );
  }
  
  export default Table;
  </code></pre>
  <p>Here the component of the search bar:</p>
  <pre><code>import &quot;./searchBar.css&quot;
  
  function SearchBar({ searchedData, onSearch }) {
    return (
      &lt;div className=&quot;search-bar&quot;&gt;
        &lt;label&gt;Search&lt;/label&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;Search User&quot; value={searchedData} onChange={e =&gt; onSearch(e.target.value)} /&gt;
      &lt;/div&gt;
    );
  }
  
  export default SearchBar;
  </code></pre>
  <p>and here is the home:</p>
  <pre><code>import &quot;./Home.css&quot;;
  import React, { useEffect, useState } from &quot;react&quot;;
  import Header from &quot;../components/Header/Header&quot;;
  import Table from &quot;../components/Table/Table&quot;;
  import AddData from &quot;../components/AddData/AddData&quot;;
  import SearchBar from &quot;../components/SearchBar/SearchBar&quot;;
  import { userArr } from &quot;../mock/users&quot;;
  
  const Home = () =&gt; {
    const headerUser = [&quot;Name&quot;, &quot;Email&quot;, &quot;Occupation&quot;, &quot;Birthday&quot;];
    const [newUserArr, setNewUserArr] = useState(userArr);
    const [searchedItem, setSearchedItem] = useState(&quot;&quot;);
  
    const searchedArray = newUserArr.filter((item) =&gt; {
      if (item.name.toLowerCase().includes(searchedItem.toLowerCase())) {
        return true;
      }
    });
    function onSearch(e) {
      setSearchedItem(e);
    }
  
    const addDataToArr = (form) =&gt; {
      setNewUserArr([...newUserArr, form]);
    };
  
    const deleteData = (indexUserArr) =&gt; {
      let restOfDataArray = newUserArr.filter(
        (element, ind) =&gt; ind !== indexUserArr
        );
        setNewUserArr(restOfDataArray);
      };
  
    return (
      &lt;&gt;
        &lt;Header  /&gt;
        &lt;SearchBar searchedData={searchedItem} onSearch={onSearch} /&gt;
        &lt;Table
          type=&quot;user&quot;
          headerData={headerUser}
          bodyData={newUserArr}
          removeItem={(index) =&gt; deleteData(index)}
          
        /&gt;
        &lt;AddData saveData={(val) =&gt; addDataToArr(val)} /&gt;
      &lt;/&gt;
    );
  };
  
  export default Home;
  </code></pre>
  <p>thank you</p>