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

please add handleEdit, handleDelete function code – Dinesh undefined May 18 '18 at 06:43 — Dinesh undefined, May 18 '18 at 06:43
Show us how you are handling the remove and add of data. – null May 18 '18 at 06:44 — null, May 18 '18 at 06:44
@Dineshundefined Code Updated. – Miral Kumbhani May 18 '18 at 07:11 — Miral Kumbhani, May 18 '18 at 07:11
@null Code Updated. Please check. – Miral Kumbhani May 18 '18 at 07:12 — Miral Kumbhani, May 18 '18 at 07:12

score 0 · Accepted Answer · answered May 18 '18 at 07:44

0

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

answered May 18 '18 at 07:44

Jeeva

1,245
7
12

1

I did change the state and tried rendering the table. Will still take reference from the link you've mentioned and will get back to you over this. – Miral Kumbhani May 18 '18 at 09:12
This table is a part of my component. So, I don't understand how will componentWillReceiveProps be of any help, as my props aren't changing. Please explain. – Miral Kumbhani May 18 '18 at 10:31
The componentWillReceiveProps will be used if you trying to access the state using react router. ie (eg, /person/:id) that is you may want to see different person details such as /person/1 or /person/2. So at that time you need to change the state of data serving your table in componentWillReceiveProps. The links I posted it for your future reference. I will post the answer shortly which will fix your problem. – Jeeva May 18 '18 at 10:55
That's my point. I'm not using react router to re-render the table. I just want to perform CRUD operations and show the result in the table. – Miral Kumbhani May 18 '18 at 11:35
Whenever you perform some action such as handleEdit or handleDelete, you simply need to update the state (this.state.data). So that, it will render automatically, without a refresh – Jeeva May 18 '18 at 11:38
Thought of that. Was trying that. Let me try and get back to you on this. – Miral Kumbhani May 18 '18 at 11:52
Still stuck at the same issue. Doesn't help. – Miral Kumbhani May 29 '18 at 11:38
If you're still stuck why is this marked answered? – Jesse Dec 17 '20 at 13:57

score 0 · Answer 2 · answered Jun 06 '18 at 08:50

Worked fine. Was making a mistake of calling the API for displaying the list before the response of adding/ updating or deleting the entry. The bottom line is, if the state gets updated, the component re-renders itself. Just have to take care and not mess up with the API calls like I did.

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

2 Answers2