Disable dynamically Button on react bootstrap table cell

Question

I've emitting a button in a column of a react bootstrap table2, which should be dynamically enabled/disabled programmatically:

{ dataField: 'dummy' text: '', formatter: (cellContent, row) => { return ( <Button disabled={enableButton} onClick={() => handleDelete(row)}>Click!); }, isDummyField: true } enableButton is set via a hook to true/false. When I reload the page the button is accordingly enbaled/disabled, so when table is rendered again everything is fine (also when sort the content or filter etc). Do I need to force the rendering again (and how)? Or do I miss something. From my understanding the update should be triggered by the hook, so manual force to render is a bit ugly.

is 'enableButton' a state (useState())?. Can you provide more code please, e.g. from your hook, what hook are you using to set 'enableButton' ? — m_wer, Commented May 6, 2021 at 14:45
The table does not re-render when the parent component's state changes. Unless: you force it to. One way to do this is to create the table data dynamically each time the state changes and the component re-renders, by calling map() on the original data and adding some row property based on the state. This way you can do disabled={row.enableButton}. — user5734311, Commented May 6, 2021 at 14:58

boiler · Accepted Answer · 2021-05-07 12:18:57Z

1

Like suggested from Chris G, I renamed dataField to something meaningful and unique like "enableClickButton", remove isDummyField. Then, use the property disabled={row.enableClickButton} to enable/disable the button which works like a charm. Thanks!

answered May 7, 2021 at 12:18

boiler

17910 bronze badges

Add a comment |

Collectives™ on Stack Overflow

Disable dynamically Button on react bootstrap table cell

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related