How to add event handlers to none React parts of the page - reactjs

Question

I have a dropdown box in a react component that expands/contracts to show the content. If the user clicks off the box (almost anywhere on the page), I want the box to contract. Without React, I would use an event handler to run some jQuery to contract the box, however my understanding is that this will cause issues since the jQuery will have changed the DOM and React will not be aware of it.
Can someone please explain how to add an event handler to an element that will cause a function inside React to run and contract the box.
I have tried the code below, however when I try to add the event listener i get the message that "this.myFunction" is undefined in my AddListener function.
import './App.css';
import React, { Component } from 'react';
//function App() {
class App extends Component {
constructor(props) {
super(props);
this.myFunction = this.myFunction.bind(this);
this.removeListener = this.removeListener.bind(this)
}
myFunction() {
alert("Hi user!");
}
removeListener() {
document.getElementById('CLICKER').removeEventListener("click", this.myFunction, false);
console.log('Removed');
}
addListener() {
document.getElementById('CLICKER').addEventListener('click', this.myFunction);
console.log('Added');
}
render() {
return (
<div className="App">
<div onClick={this.removeListener} style={{ backgroundColor: 'red' }}>
Remove Event Listener
</div>
<div onClick={this.addListener} style={{ backgroundColor: 'blue' }}>
Add Event Listener
</div>
</div>
);
}
}
export default App;

Answer 1

I realised i needed to add the constructor:
this.addListener = this.addListener.bind(this);