CODEWITHSUNDEEP
javascriptreactjs
chris
chris

Reputation: 61

Problem to delete a row from a table with React

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')
    
    )

Upvotes: 2

Views: 1120

Answers (2)

Yousaf
Yousaf

Reputation: 29354

.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:

  1. 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.

  2. 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 });
};

Upvotes: 2

zahra zamani
zahra zamani

Reputation: 1375

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 });  
      };

Upvotes: 0

Related Questions