React-bootstrap-table2: Second table does not rerender with updated date after setState called

[functionsonly]

I have two tables. If I refresh an element in one table, the second table doesn't show the update after setState has been called.

https://codesandbox.io/s/1v8znzknm7

Is there a way to force all tables to re-render?

[AllenFang]

@functionsonly this is not a bug, you mutate the state directly. Please do not modify the state data.

here is an article to teach how to mutate data in a correct way.

[functionsonly]

Updated with a copy of the state data. Still no render: https://codesandbox.io/s/73zp4z5jk1

[functionsonly]

Nevermind, I see what you're saying! Thanks.

[AllenFang]

👍

[matteusbarbosa]

The ones facing same difficulties about the issue, please just follow @AllenFang link provided. It says that you must update the table data array using .map . check example below

```
updateTableRow(array, target_index, form) {
return array.map((item, index) => {
if (index == target_index) {
// This is the item we care about - lets replace it with updated data
return form;
}

  // Otherwise, this is other rows we do not want - keep it as-is
  return item;
})

}
```

[HUANGXUANKUN]

@matteusbarbosa Oh man.. Should have raised this post up. It is so helpful for implementing an add, edit or delete button with form like this: