Using setState in externaly controlled custom callback #781
Description
Griddle version
1.11.0
Expected Behavior
- A Trigger function exists in an external context:
extTrigger(){
console.log("EXT TRIGGER");
this.setState({ extVar: 1 })
}
-
During extrenal control of Griddle through a react component it is possible to pass a callback function in Griddle properties(stories/index.tsx):
<Griddle extTrigger={this.extTrigger} data={fakeData} plugins={[LocalPlugin, LocalCustomPlugin]}> -
This can then be obtain it in a Container component, like TableContainer(src/plugins/localCustomPlugin/components/TableBodyContainer.js):
connect((state, props) => ({
visibleRowIds: props.visibleRowIdsSelector(state),
className: classNamesForComponentSelector(state, 'TableBody'),
style: stylesForComponentSelector(state, 'TableBody'),
extTrigger: ((state)=>{return state.get('extTrigger')})(state),
})),
)(({ Row, visibleRowIds, style, className, extTrigger }) => (
<OriginalComponent
rowIds={visibleRowIds}
Row={Row}
style={style}
className={className}
extTrigger={extTrigger}
/>
- And finally the extTrigger function can be used as a callback in TableBody(src/plugins/localCustomPlugin/components/TableBody.js):
<tbody style={style} className={className}>
{ rowIds && rowIds.map((k, i) => <Row key={k} griddleKey={k} index={i} />) }
<tr>
<td colSpan="3">
This Button will use an external callback, brought in by the TableContainer (set in Griddle props), This trigger will print something and try to set state in the external context, but It fails
<button onClick={extTrigger}> Try me </button>
</td>
</tr>
</tbody>
- The state variable in the external context changes but Griddle just loses all data
Actual Behavior
The data should still show up in Griddle.
Steps to reproduce
Just load the story
Controlling external state through a callback
and press
Try me
Griddle will break but the state variable in the external context will change as expected.