Since Updating React-dom And React-router-dom Packages: Behaviors Executing Additional Times

I've inherited a react/node/prismic application where we need to update the prismic-reactjs package, which resulted in needing to update a few others- in total, we changed: prismic

Solution 1:

UPDATE (as below does not work):

Could you key off there being an activePerson in state as to whether the modal is open or not, which would mean you wouldn't want setQueuedUpPerson or setNoQueuedUpPerson to call? Either change them like this:

setQueuedUpPerson(e, personName) {
    if(!this.state.activePerson) {
      this.setState({
          queuedUpPerson: personName,
          lastQueuedPerson: personName
      })
    }

    e.stopPropagation()
}

setNoQueuedUpPerson(e) {
    if(!this.state.activePerson) {
      this.setState({
          queuedUpPerson: null
      })
    }
    e.stopPropagation()
}

Or make the onMouseEnter and onMouseLeave events null if there is an activePerson?

---

You should be able to change

onMouseEnter={this.state.isDesktop ? () => this.setQueuedUpPerson(person.name) : null}

to

onMouseEnter={this.state.isDesktop ? (e) => this.setQueuedUpPerson(e,person.name) : null}

And then access the event as with your previous question to stop propagation:

setQueuedUpPerson(event, personName) {
    this.setState({
        queuedUpPerson: personName,
        lastQueuedPerson: personName
    })
    event.stopPropagation()
}

With onMouseLeave, you just need to add the event parameter to your function as it is already exposed since you are passing the function reference directly, as opposed to calling it from an anonymous function like with onMouseEnter:

setNoQueuedUpPerson(event) {
    this.setState({
        queuedUpPerson: null
    })
    event.stopPropagation()
}