CODEWITHSUNDEEP
javascriptreactjs
Arasto
Arasto

Reputation: 491

Remove items dynamically from table/list

I have this delete method that works just fine, but it does not remove items from the list dynamically, but requires me to reload the page to be able to see the results.

delete method

  deleteRevision = (id) => {
    alert("Are you sure you want to delete {revisionID} ?")
    console.log(id)
    axios.delete("http://localhost:8080/lagbevakning/revision/delete?id=" + id)
  }

My table method

  finishedRevisionsList = () => {
    return(
      <div>
          <Table celled>
              <Table.Header>
                <Table.Row>
                  <Table.HeaderCell>  Status      </Table.HeaderCell>
                  <Table.HeaderCell>  Skapad      </Table.HeaderCell>
                </Table.Row>
              </Table.Header>

          {this.state.data.map((item, i) => (
                <Table.Body key={item.id}>
                  <Table.Row>
                    <Table.Cell>{item.status}</Table.Cell>
                    <Table.Cell> 
                          <i className="far fa-trash-alt" onClick={this.deleteRevision.bind(this, item.id)}></i>
                    </Table.Cell>
                  </Table.Row>
                </Table.Body>
          ))}
          </Table>
      </div>
    )
  }

Render

    render() {
        return (
          <div>
           {this.finishedRevisionsList()}
          </div>
        )
      }

Any suggestions on how i can get this table to be more dynamic?

Upvotes: 1

Views: 108

Answers (3)

Javad Ebrahimi
Javad Ebrahimi

Reputation: 209

You remove element from this.state.data after that you must set the new data to state(without the element you removed)

somthing like:

this.setStete((prevState) => {
  data: prevState.data.filter(item => item.id !== id);
);

Upvotes: 0

Uladzislau Ulasenka
Uladzislau Ulasenka

Reputation: 582

You should change your data array in state after delete.

Upvotes: 0

Tholle
Tholle

Reputation: 112787

Your deleteRevision method just sends a DELETE request to the backend, but doesn't update the component state.

You could filter out the item with the given id from data.

deleteRevision = id => {
  axios.delete("http://localhost:8080/lagbevakning/revision/delete?id=" + id);

  this.setState(({ data }) => ({
    data: data.filter(item => item.id !== id)
  }));
}

Upvotes: 4

Related Questions