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.

Answer

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

Advertisement

Answer