Skip to content
Advertisement

Exchanging events between React components

I’m making a Chrome extension that inserts 2 different React extensions on to the page. I’d like to keep each of them in sync by sending the 2nd one an event with appropriate data when something else is selected in the first one.

Is there a best practice when it comes to sending events to other components?

I tried this from the first:

evt = new CustomEvent("selectedEmailChange", {
  detail: {
    email: data.email
  }
});
window.dispatchEvent(evt);

And then in the 2nd:

  componentDidMount: function() {
    this.listenForEmailChange();
  },
  componentWillUnmount: function() {
    window.removeEventListener("selectedEmailChange", this.handleEmailChange, false);
  },
  listenForEmailChange: function() {
    window.addEventListener("selectedEmailChange", this.handleEmailChange, false);
  },
  handleEmailchange: function() {
    debugger
    console.log("i heard you dog!");
  },

But nothing’s being caught in the 2nd.

Advertisement

Answer

Gaaah! handleEmailchange should be handleEmailChange (capital ‘C’).

User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement