title: ReactJs how do i delete a row from a table?
body: <p>I am using reactsjs. I have a table that adds rows based on a button click. The rows are also added to an array of rows. When that row is added it has a button in it that will delete that row when clicked. This is what I need to get working. The rows are stored in an array as in an array. I have made an attempt as by looking at examples. With my attempt, the incorrect row is being deleted. </p>
  
  <p>Here is my code that I tried:</p>
  
  <pre><code>constructor() {
      super();
      this.state = {
        tasks: []
      }
      this.handleDeleteRow = this.handleDeleteRow.bind(this);
    }
  
  handleDeleteRow(i) {
      let rows = [...this.state.rows]
      rows.splice(i, 1)
      this.setState({ 
        rows: rows
      })
    }
  </code></pre>
  
  <p>A snippet of code:</p>
  
  <pre><code>&lt;tbody&gt;
  {rows.map((row,i) =&gt; {
                  return(
                      &lt;tr key={i}&gt;
                          &lt;td scope="row" &gt;{i}&lt;/td&gt;
                          &lt;td&gt;{row.ex}&lt;/td&gt;
                          &lt;td&gt;{row.ex}&lt;/td&gt;
                          &lt;td&gt;{row.ex}&lt;/td&gt;
                          &lt;td&gt;{row.ex}&lt;/td&gt;
                          &lt;td&gt;{row.ex}&lt;/td&gt;
                          &lt;td&gt;
                              this is the delete button
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  );
              })}
  &lt;/tbody&gt;
  </code></pre>