I need to set a state field which I get from an event, but it doesn't get set when I pass a function to it. The component and method looks like the following:
constructor(props: SomeProps, context: any) {
super(props, context);
this.state = {
isFiltering: props.isFiltering,
anchor: "",
};
}
private toggleFilter = (event: any) => {
event.persist()
this.setState(prevState => ({
isFiltering: !prevState.isFiltering,
anchor: event.currentTarget // does not work, it's null
}));
}
If I remove event.persist() then I get the following error :
This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the method
currentTargeton a released/nullified synthetic event. This is a no-op function. If you must keep the original synthetic event around, use event.persist(). See https://facebook.github.io/react/docs/events.html#event-pooling for more information.
For some reason the following code works:
private toggleFilter = (event: any) => {
this.setState({anchor:event.currentTarget}) // works fine
this.setState(prevState => ({
isFiltering: !prevState.isFiltering,
}));
}
Why does the above works but not when I use this.setState(prevState=> ...)?
