Delete dynamically added table row - react js

Question

I am adding table rows to a table dynamically. Here how it looks in the UI:

Here is the logic I am using to create a new row:

I have a state variable this.state = ({rows: []})

on the "Insert" button click I am doing:

addNewRow = () => {
        this.setState({rows: this.state.rows.concat([{}])});
    }

In my render() I have the below code:

const rows = this.state.rows.map((item, id) => {
            return(
                <tr key={id}>
                    <td>Something</td>
                    <td>Something</td>
                    <td>Something</td>
                    <td>Something</td>
                    <td><Button onClick={(event) => this.removeRow(event, id)}>Delete</Button></td>
                </tr>
            );
        });

and, obviously my final table code looks like the below:

<Table borderless>
    <tbody>
       {rows}
    </tbody>
<tfoot>
    <tr>
       <td>
        <Button onClick={() => {this.addNewRow()}} size="sm" className="float-left">insert</Button>
       </td>
    </tr>
</tfoot>
</Table>

Here is my removeRow function:

removeRow = (event, id) => {
        event.preventDefault();
        var index = this.state.rows.indexOf(id);
        this.state.rows.splice(index, 1);
        this.setState({rows: this.state.rows});
    }

The entire code works. I have changed variable names and stripped unwanted codes from them, but this is to give an idea of how I designed it.

My problem is when I click on "Delete" button, it always removes the last item in the row, not the item row which I have clicked. How to fix this?

I googled about the same, and I found few examples, to be honest, I felt they are complex and so I decided to go on my own way.

Please advise what need to be done to fix this issue.

did you try my edited answer ?

aravind_reddy
– aravind_reddy

2018-06-29 09:12:30 +00:00
Commented Jun 29, 2018 at 9:12 — aravind_reddy
– aravind_reddy, Commented Jun 29, 2018 at 9:12

Ming Soon · Accepted Answer · 2018-06-29 07:01:35Z

1

That's because you're using an array index as a key for <tr> element.

React uses the key to identity what to insert, or delete from existing DOM tree.

Please use any other unique identifier, for instance, Date.now() as a key, and save this key as a part of rows state.

addNewRow = () => {
  const { rows } = this.state
  this.setState({
    rows: [
      ...rows,
      {
        id: Date.now(),
      },
    ],
  })
}

render() {
   const rows = this.state.rows.map((item, index) => (
     <tr key={item.id}>
     </tr>
   ))
}

edited Jun 29, 2018 at 7:01

answered Jun 29, 2018 at 6:52

Ming Soon

1,0182 gold badges12 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jithesh Kt Over a year ago

Thanks. Can you show me a sample setting Date.now() saving it to the part of rows. I am confused where it should be done and what will be the changes having to my removeRow function.

aravind_reddy · Accepted Answer · 2018-06-29 07:23:55Z

1

Never Mutate the state directly in React:

You need to do it this way:

removeRow=(event,id)=>{  
  var array = [...this.state.rows]; // make a new copy of array instead of mutating the same array directly. 
  var index = array.findIndex(x => x.id===id); //find the index of item which matches the id passed to the function
  array.splice(index, 1);
  this.setState({people: array});
  }

edited Jun 29, 2018 at 7:23

answered Jun 29, 2018 at 6:37

aravind_reddy

5,4964 gold badges28 silver badges41 bronze badges

4 Comments

Jithesh Kt Over a year ago

Thanks noted. But this still doesn't fix my issue. It still delete's the last row instead of current clicked row.

aravind_reddy Over a year ago

i have edited my answer. the problem might be in finding the Index of item. see i have changed the logic for finding the index

Jithesh Kt Over a year ago

Yes, I did. Good catch on finding that indexOf is causing the first issue. You are right. That line in my code always returns -1. Your code of using findIndex is perfect. It finds the index fine, but still at the end react removes the last added element :(

aravind_reddy Over a year ago

can you add your minimal code to sandbox it will be very easy to find the actual problem.

Niladri Basu · Accepted Answer · 2018-06-29 07:12:39Z

0

That is because you are using .map() wrong.

You'll need to pass item like this:

<td><Button onClick={(event) => this.removeRow(event, item)}>Delete</Button></td>

You were passing index of the array as id. Because, second parameter of array.map operator is the index of that element in the array.

Do this instead:

removeRow = (event,item) => {  
  var array = [...this.state.rows]; // make a new copy of array instead of mutating the same array directly. 
  var index = array.indexOf(item)
  array.splice(index, 1);
  this.setState({people: array});
  }

edited Jun 29, 2018 at 7:12

answered Jun 29, 2018 at 6:52

Niladri Basu

10.7k7 gold badges59 silver badges65 bronze badges

4 Comments

aravind_reddy Over a year ago

what are you doing with item in removeRow and where are getting the id from ?

Niladri Basu Over a year ago

Item is being passed. Of which OP wants to finds the index of.

Jithesh Kt Over a year ago

Makes sense. But still it removes the last item, instead of the clicked item.

Niladri Basu Over a year ago

Where did you logged it?

Collectives™ on Stack Overflow

Delete dynamically added table row - react js

3 Answers 3

1 Comment

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related