ReactJS can't set state from an event with event.persist()

by

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 currentTarget on 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=> ...)?

123 thoughts on “ReactJS can't set state from an event with event.persist()”

Leave a Comment