Problem to delete a row from a table with React

Question

I'm trying to figure out how to remove a row from a simple table using a simple button.

I try to use the index but with what I wrote, when I click on the line to delete, it is only all the others that are deleted ...

I guess the problem comes from the way I use the index but I have some difficulties to understand the behavior.

 let users = [
        { firstName: "John", lastName: "Connor", age: 20 },
        { firstName: "Geralt", lastName: "Rivia", age: 45 },
        { firstName: "Nathan", lastName: "Drake", age: 36 }
    ]
    
    
    class exercice extends React.Component {
        constructor(props){
            super(props);
            this.state = {
                users: users
            }
        }
        
        onClickDeleteRow = index => {
            users = users.splice(index,1)
            this.setState({users: users})
            console.log(this.state.users)
        }
        
    
        render() {
            let usersName = this.state.users.map((user, index) => (
                <tr key={index}>
                    <td>{user.firstName} </td>
                    <td>{user.lastName} </td>
                    <td><button onClick={() => this.onClickDeleteRow(index)}>Delete</button></td>
                </tr>
            ))
    
            return (
                <table>
                    <thead>
                        <tr>
                            <th> firstName </th>
                            <th> lastName</th>
                        </tr>
                    </thead>
                    <tbody>
                        {usersName}
                    </tbody>
                </table>
            )
        }
    }
    
    ReactDOM.render(
        <div className="firstContainer">
            <Exercice />
        </div>,
        document.getElementById('root')
    
    )

Yousaf · Accepted Answer · 2020-10-03 13:08:23Z

2

.splice() method returns an array containing the elements that were removed from the original array on which .splice() method was called. So if index is 1, then

users = users.splice(index,1)

will update users and assign an array containing one element to the users constant. If index is 1 then after the above statement, users will be

users = [{ firstName: "Geralt", lastName: "Rivia", age: 45 }]

which is what gets set in the state. That is why all other rows are removed except the one that you wanted to delete.

Solution

You could solve the problem in couple of ways:

Change
```
users = users.splice(index, 1);
```
to
```
users.splice(index, 1);
```
this will make sure that you don't update the users with the return value of .splice() method.
Problem with the first approach is that it modifies the original users array. You could avoid modifying the users array by using the .filter() method.

Change the onClickDeleteRow method as shown below:
```
onClickDeleteRow = (index) => {
   const updatedUsers = this.state.users.filter((user, idx) => idx !== index);
   this.setState({ users: updatedUsers });
};
```

edited Oct 3, 2020 at 13:08

answered Oct 3, 2020 at 12:54

Yousaf

29.6k6 gold badges54 silver badges78 bronze badges

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

4 Comments

cssyphus Over a year ago

Nice answer - very well explained.

chris Over a year ago

Thank you very much for this great explanation, it helped me a lot! Everything is working fine. I have another little question related to calling onClickDeleteRow in the render. I still have a little trouble understanding why onClick = {() => this.onClickDeleteRow (index)} is correct but not just this.onClickDeleteRow (index).

Yousaf Over a year ago

Value of the onClick prop should be a function, so when you do onClick={this.onClickDeleteRow (index)}, you are not passing a function, you are calling the onClickDeleteRow function and setting its return value as a value of the onClick prop. onClick prop needs a function that React can call in response to a click.

chris Over a year ago

Ok, so it explains this error Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state. Thanks for taking a little of your time to help me, that's really nice of you.

zahra zamani · Accepted Answer · 2020-10-03 13:00:17Z

0

I think you should call this.state.users in the method

  onClickDeleteRow = index => {
        const users = this.state.users;
        users.splice(index, 1);
        this.setState({ users: users });  
      };

answered Oct 3, 2020 at 13:00

zahra zamani

1,38312 silver badges32 bronze badges

Collectives™ on Stack Overflow

Problem to delete a row from a table with React

2 Answers 2

Solution

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Solution

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related