How to re-render/update the table in react js after CRUD operations?

Question

I've used simple table (code appended below) and tried looking out for many references but couldn't find an appropriate solution to my problem. The table is displayed fine, but the problem starts when any data is added, updated or deleted. It doesn't get reflected unless the page is refreshed. Few ways that I've tried is updating state but doesn't help. I even tried updating the component forcefully but in vain. I even tried rendering the component.

<div className="table">
  <table className="table table-striped table-padding">
    <thead>
      <tr className="heading">
        <th className="col-md-2">Image</th>
        <th className="col-md-3">Office Name</th>
        <th className="col-md-5">Address</th>
        <th className="col-md-1"></th>
        <th className="col-md-1"></th>
      </tr>
    </thead>
    <tbody>
      {
        (this.state.dataUpdated) &&
          this.state.data.map((list, index) => {
            return (
              <tr key={index}>
                <td><img style={{height: '30px', width: '30px'}} src={list.imageData} alt="icon"/></td>
                <td>{list.name}</td>
                <td>{list.address}</td>
                <td><button type="button" onClick={(e) => this.handleEdit(list.officeId)}><i className="fa fa-pencil" aria-hidden="true"></i></button></td>
                <td><button type="button" onClick={(e) => this.handleDelete(list.officeId)}><i className="fa fa-trash" aria-hidden="true"></i></button></td>
              </tr>
            )

          })
        }
      </tbody>
   </table>
</div>

handleEdit(id) {
  this.state.data.map(row => {
    if(row.officeId === id) {
      return (
        this.setState({ displayData: row })
      )
    }
  });
  this.displayOfficeList();
}

handleDelete(id) {
  const { dispatch } = this.props;
  dispatch(commonActions.deleteOffice(id));
  this.displayOfficeList();
}

displayOfficeList() {
  this.toggleFlag();
  commonServices.getOfficeList().then((res) => {
    let demo = res;
    this.setState({ data: demo.content});
    this.setState({ dataUpdated: true});
  });
}

Answer 1

You need to update your state of data every time when you are performing any actions such as add, edit and delete.

Use componentWillReceiveProps, use the below link as a reference

React doesn't reload component data on route param change

you may find official documentation here https://reactjs.org/docs/state-and-lifecycle.html

and also https://hackernoon.com/reactjs-component-lifecycle-methods-a-deep-dive-38275d9d13c0