title: React: deleting a targeted table row always deletes the first row
body: <p>I have a component that filters companies based on the term entered in the search box, then filters them once again based on whether their account is activated or not, and then maps them into a table that contains several columns with the company data. The last table column for each company contains several buttons, one of which is a delete button that triggers a modal dialog, and then deletion has to be confirmed or canceled from the modal.</p>
  
  <p>For the sake of brevity I'll omit the imports and exports that aren't important:</p>
  
  <pre><code>import {searchingFor} from '../../../containers/CompaniesContainer/CompaniesContainer';
  const companiesTable = (props) =&gt; {
    return (
      &lt;table className={classes.Table}&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th className={classes.First}&gt;&amp;nbsp;&lt;/th&gt;
            &lt;th onClick={props.sortByName} className={[classes.Second, props.sortingClass].join(' ')}&gt;&lt;span&gt;Name&lt;/span&gt;&lt;img src={downArrow} alt="down-arrow" /&gt;&lt;/th&gt;
            &lt;th onClick={props.sortByAddress} className={[classes.Third, props.sortingClass].join(' ')}&gt;&lt;span&gt;Email address&lt;/span&gt;&lt;img src={downArrow} alt="down-arrow" /&gt;&lt;/th&gt;
            &lt;th onClick={props.sortByAdded} className={[classes.Fourth, props.sortingClass].join(' ')}&gt;&lt;span&gt;Added&lt;/span&gt;&lt;img src={downArrow} alt="down-arrow" /&gt;&lt;/th&gt;
            &lt;th className={classes.Last}&gt;&amp;nbsp;&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          {
            props.companies.filter(searchingFor(props.term)).filter(function (company) {
              if(props.isActive === true) {
                return company.active;
              } else {
                return !company.active
              }
            }).map((item, index) =&gt;
              &lt;tr key={item.id}&gt;
                &lt;td&gt;
                  &lt;img src={companyImg} alt="companies" /&gt;
                &lt;/td&gt;
                &lt;td&gt;{item.name}&lt;/td&gt;
                &lt;td&gt;{item.street},&lt;br/&gt;{item.city}&lt;/td&gt;
                &lt;td&gt;{item.added}&lt;/td&gt;
                &lt;td&gt;
                  &lt;Button btnType={props.btnClass1} onClick={() =&gt; props.deleteInitiate(item.name)}&gt;{props.btnText1}&lt;/Button&gt;
                  &lt;Button btnType={props.btnClass2}&gt;{props.btnText2}&lt;/Button&gt;
                  &lt;Button btnType={props.btnClass3}&gt;{props.btnText3}&lt;/Button&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
            )
          }
        &lt;/tbody&gt;
      &lt;/table&gt;
    );
  };
  
  export default companiesTable;
  </code></pre>
  
  <p>This component is then mounted twice from a component that contains two tabs. In one tab I list the active accounts and in the other the inactive ones.</p>
  
  <pre><code>const companiesTabs = (props) =&gt; {
    return (
      &lt;Tabs tabsClass={classes.TabList} tabContentClass={classes.TabContent}&gt;
        &lt;div 
          label="Active"
          tabClass={classes.TabItem} 
          activeClass={classes.TabItemActive} 
          hasLabel={true}
          hasImg={false}  
        &gt;
          &lt;CompaniesTable 
            isActive={true} 
            term={props.term}
            companies={props.companies}
            sortByName={props.sortByName}
            sortByAddress={props.sortByAddress}
            sortByAdded={props.sortByAdded}
            sortingClass={props.sortingClass}
            toggleSortingClass={props.toggleSortingClass}
            btnClass1="secondary"
            btnClass2="primary"
            btnClass3="success"
            btnText1="Delete"
            btnText2="Deactivate"
            btnText3="Sign in"
            deleteInitiate={props.deleteInitiate}
          /&gt;
        &lt;/div&gt;
        &lt;div 
          label="Inactive"
          tabClass={classes.TabItem} 
          activeClass={classes.TabItemActive}
          hasLabel={true}
          hasImg={false}
        &gt;
          &lt;CompaniesTable 
            isActive={false} 
            term={props.term}
            companies={props.companies}
            sortByName={props.sortByName}
            sortByAddress={props.sortByAddress}
            sortByAdded={props.sortByAdded}
            sortingClass={props.sortingClass}
            toggleSortingClass={props.toggleSortingClass}
            btnClass1="secondary"
            btnClass2="activate"
            btnClass3="success"
            btnText1="Delete"
            btnText2="Activate"
            btnText3="Sign in"
            deleteInitiate={props.deleteInitiate}
          /&gt;
        &lt;/div&gt;
      &lt;/Tabs&gt;
    );
  };
  
  export default companiesTabs;
  </code></pre>
  
  <p>Then I have a component that holds the tabs component:</p>
  
  <pre><code>const companies = (props) =&gt; {
    return (
      &lt;React.Fragment&gt;
        &lt;CompaniesTabs
          term={props.term}
          companies={props.companies}
          sortByName={props.sortByName}
          sortByAddress={props.sortByAddress}
          sortByAdded={props.sortByAdded}
          sortingClass={props.sortingClass}
          toggleSortingClass={props.toggleSortingClass}
          deleteInitiate={props.deleteInitiate}
        /&gt;
      &lt;/React.Fragment&gt;
    );
  };
  </code></pre>
  
  <p>And a class based container component that contains the state and the methods, and renders the <code>Modal</code>, <code>SearchBox</code> and <code>Companies</code> components.</p>
  
  <pre><code>export function searchingFor(term) {
    return function(x) {
      return x.name.toLowerCase().includes(term.toLowerCase()) || !term;
    }
  }
  
  class CompaniesContainer extends Component {
    constructor(props) {
      super(props);
      this.state = {
        term: '',
        sorting: false,
        deleting: false,
        deletingCompanyName: null,
        companies: [
          { 
            id: 1,
            name: "Company 1",
            street: "123 Some Street",
            city: "London",
            added: "03.04.19",
            active: true,
          },
          { 
            id: 2,
            name: "Company 2",
            street: "321 Some other Street",
            city: "New York",
            added: "04.04.19",
            active: false,
          }
        ]
      }
      this.compareBy.bind(this);
      this.sortBy.bind(this);
      this.toggleSortingClass= this.toggleSortingClass.bind(this);
      this.searchHandler = this.searchHandler.bind(this);
      this.deleteInitiateHandler = this.deleteInitiateHandler.bind(this);
    }
  
    compareBy(key) {
      return function (a, b) {
        if (a[key] &lt; b[key]) return -1;
        if (a[key] &gt; b[key]) return 1;
        return 0;
      };
    }
  
    sortBy(key) {
      let arrayCopy = [...this.state.companies];
      arrayCopy.sort(this.compareBy(key));
      this.setState({companies: arrayCopy});
    }
  
    toggleSortingClass() {
  
    };
  
    searchHandler(event){
      this.setState({term: event.target.value});
    }
  
    deleteInitiateHandler = (name) =&gt; {
      this.setState({deleting: true, deletingCompanyName: name});
    }
  
    deleteHandler = (companyIndex) =&gt; {
      const companies = [...this.state.companies];
      companies.splice(companyIndex, 1);
      this.setState({companies: companies, deleting: false});
    };
  
    deleteCancelHandler = () =&gt; {
      this.setState({deleting: false});
    }
  
    render() { 
      const {term, companies} = this.state;
  
      return (
        &lt;React.Fragment&gt;
          &lt;Modal 
            show={this.state.deleting} 
            modalClosed={this.deleteCancelHandler} 
          &gt;
            &lt;DeleteCompany 
              delete={this.deleteHandler} 
              deleteCancel={this.deleteCancelHandler}
            /&gt;
          &lt;/Modal&gt;
          &lt;SearchBox 
            change={this.searchHandler} 
            value={term} 
            placeholder="Search Companies…" 
          /&gt;       
          &lt;Companies 
            term={term}
            companies={companies}
            sortByName={() =&gt; this.sortBy('name')}
            sortByAddress={() =&gt; this.sortBy('city')}
            sortByAdded={() =&gt; this.sortBy('id')}
            sortingClass={this.state.sorting}
            toggleSortingClass={this.toggleSortingClass}
            deleteInitiate={this.deleteInitiateHandler}
          /&gt;             
        &lt;/React.Fragment&gt;
      );
    }
  };
  export default CompaniesContainer;
  </code></pre>
  
  <p>finally, a <code>DeleteCompany</code> component which is mounted into a <code>Modal</code> component, which contains cancel and delete buttons:</p>
  
  <pre><code>const deleteCompany = (props) =&gt; {
    return (
      &lt;React.Fragment&gt;
        &lt;h3 className={classes.ModalTitle}&gt;Confirm deletion&lt;/h3&gt;
        &lt;p className={classes.ModalText}&gt;Are you sure you want to delete the company of &lt;strong&gt;{props.name}&lt;/strong&gt;&lt;/p&gt;
        &lt;ul className={classes.ModalButtonsList}&gt;
          &lt;li className={classes.ModalButtonsListItem}&gt;
            &lt;Button btnType='primary' onClick={props.deleteCancel}&gt;Cancel&lt;/Button&gt;
          &lt;/li&gt;
          &lt;li className={classes.ModalButtonsListItem}&gt;
            &lt;Button btnType='danger' onClick={props.delete}&gt;Delete&lt;/Button&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/React.Fragment&gt;
    );
  };
  </code></pre>
  
  <p>My problem is that when I click on a delete button of a specific company's row and confirm deletion of the row by clicking on the delete button inside the modal, the wrong row is deleted. For some reason it always deletes the first table row no matter which row I'm trying to delete. Can someone help me figure out why is this happening?</p>