Mui-datatables: onRowsSelect doesn't work with setState function inside
Expected Behavior
onRowsSelect must trigger when row was selected and mark row as selected.
Current Behavior
But if inside of callback function have this.setState({}), rows doesn't marks as selected,
Steps to Reproduce (for bugs)
- https://codesandbox.io/embed/qql7mj9v84
- Click on checkbox in first column
Your Environment
| Tech | Version |
|--------------|---------|
| Material-UI | 3.0.0 |
| MUI-datatables | 2.0.0-beta-29 |
| React | 16.4.2 |
| browser | Chrome |
| etc | |
vantsymbalenko
All 9 comments
Your example is just using the data constant you have defined, you aren't actually using this.state.data for display. There are other issues there as well since you'd probably want to initialize your state.data in your constructor. Even so, I think what you're trying to do is control what data is selected, is that right? I don't think that your example is the right approach to accomplish that.
brianpmaher
on 11 Sep 2018
Exactly, I want to do is control what data is selected. For example I want push in state some data which contains in data const.
https://codesandbox.io/embed/qlq6p81nl9
vantsymbalenko
on 11 Sep 2018
Hello @vantsymbalenko! :)
The "problem" in your example is caused by the way react works. As you keep all the props that are sent to MUIDatatable inside the render() function, every time it gets called the references for those props change, causing MUIDatatable to re-render. And every time it re-renders, it loses the selections (because you're not telling it which rows to select through props). So basically, your setState is causing that re-render and clears the selection as a consequence.
I've updated your codesandbox to a working example: https://codesandbox.io/s/ry930pyywq
The solution was moving the columns, data and options variables to the scope of the component's instance. That way, a reference for them is created when React instantiate the object, and they never change, so MUIDatatable doesn't re-render.
d-gubert
on 13 Oct 2018
I've updated your codesandbox to a working example: https://codesandbox.io/s/ry930pyywq
sorry, but codesandbox still not working. I don't see any changes in this codesandbox
vantsymbalenko
on 14 Oct 2018
@vantsymbalenko
I ran into this same issue. Seems that calling setState() any part of the call chain produced by options causes this issue. I got around this issue (definitely not conventional IMO) by making a local variable on my component then saving my selected rows to that component. Basically, using the component variable as a "faux state". its probably not the "right" answer, but it works.
hwatersiv
on 15 Oct 2018
@vantsymbalenko
I ran into this same issue. Seems that calling setState() any part of the call chain produced by options causes this issue. I got around this issue (definitely not conventional IMO) by making a local variable on my component then saving my selected rows to that component. Basically, using the component variable as a "faux state". its probably not the "right" answer, but it works.
could you give me an example in codesandbox?
vantsymbalenko
on 15 Oct 2018
something like this: https://codesandbox.io/s/lllojqp079
For some reason your version here does NOT have the selected checkboxes on like mines does in my environment. The idea is the same though.
hwatersiv
on 15 Oct 2018
something like this: https://codesandbox.io/s/lllojqp079
For some reason your version here does NOT have the selected checkboxes on like mines does in my environment. The idea is the same though.
oh I've understood, thanks) I think that @d-gubert in the comment above told about the same.... Hmm I think that for now it's the best solve of my problem
vantsymbalenko
on 16 Oct 2018
~It's a bit hacky. Would love to see the ability to pass a prop that would be updated with the currently selected rows.~
All set!
jakesyl
on 9 Jan 2019
Related issues
chapmanjacobd
路
4Comments
alexanderwhatley
路
4Comments
T-pirithiviraj
路
3Comments
mhmmdakbr
路
4Comments
cahna
路
3Comments
Most helpful comment
Hello @vantsymbalenko! :)
The "problem" in your example is caused by the way react works. As you keep all the props that are sent to MUIDatatable inside the
render()function, every time it gets called the references for those props change, causing MUIDatatable to re-render. And every time it re-renders, it loses the selections (because you're not telling it which rows to select through props). So basically, your setState is causing that re-render and clears the selection as a consequence.I've updated your codesandbox to a working example: https://codesandbox.io/s/ry930pyywq
The solution was moving the
columns,dataandoptionsvariables to the scope of the component's instance. That way, a reference for them is created when React instantiate the object, and they never change, so MUIDatatable doesn't re-render.