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!

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!

• javascript
• reactjs
• express
• dom
• ecmascript-6

2 Answers 2

If you're using class based ponents then you can use ponentDidMount and ponentWillUnmount to add and remove the listener respectively, like this:

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

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

  ponentWillUnmount() {
    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);
    };
  }, []);
}

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

ponentDidMount() {
    document.addEventListener(...)
}