I'm trying to update a class-based component to a function component, but I'm facing issues with the state. In the function component, the state is not updated. After trying to debug this, there seems to be something wrong with this line: setState(func(...args)). Any suggestions?
Note: _. is lodash
export default class BPM extends React.Component {
state = { ..._.cloneDeep(bpmFlowInitialValues) };
render() {
const chart = this.state;
const stateActions = _.mapValues(
callbacks,
(func) =>
(...args) =>
this.setState(func(...args))
);
console.log(this.state);
return (
<>
<ShapesHeader />
<Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
<Flowchart chart={chart} stateActions={stateActions} />
<Sidebar selected={this.state.selected} />
</Box>
</>
);
}
}
Function comp:
export default function BPM() {
const [state, setState] = React.useState({
..._.cloneDeep(bpmFlowInitialValues),
});
const stateActions = _.mapValues(
callbacks,
(func) =>
(...args) =>
setState(func(...args))
);
console.log('state', state);
return (
<>
<ShapesHeader />
<Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
<Flowchart chart={state} stateActions={stateActions} />
<Sidebar selected={state && state.selected} />
</Box>
</>
);
}