CODEWITHSUNDEEP
javascriptreactjsexpressdomecmascript-6
Han
Han

Reputation: 426

How to add event listener in React?

I'm creating a chat app with a user and agent. I'm trying to retrieve the messages when the agent replies on his separate Rainbow UI. The problem is that this can only be done via an event listener as shown in the documentation. Can someone help me, where and how can I document.addEventListener in React?

Note: getMessageFromConversation() api doesn't work because by default, once the full messsage history has been seen, calling this api will return an error. I've tried it.

Thanks in advance!

Upvotes: 6

Views: 19494

Answers (2)

rzwnahmd
rzwnahmd

Reputation: 1082

If you're using class based components then you can use componentDidMount and componentWillUnmount to add and remove the listener respectively, like this:

class Hello extends React.Component {
  doSomething = () => {}

  componentDidMount() {
    window.addEventListener('scroll', this.doSomething)
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.doSomething)
  }
}

If you're using hooks then you can use useEffect to add and remove listener like this: 

function Hello() {
  useEffect(() => {
    const doSomething = () => {};

    window.addEventListener("scroll", doSomething);
    return () => {
      window.removeEventListener("scroll", doSomething);
    };
  }, []);
}

Upvotes: 9

Carlos Saiz Orteu
Carlos Saiz Orteu

Reputation: 1805

You can add an eventListener in react doing so in the componentDidMount so it will be done when the component is mounted. 

componentDidMount() {
    document.addEventListener(...)
}

Upvotes: 1

Related Questions