title: ReactJS - Add custom event listener to component
body: <p>In plain old HTML I have the DIV</p>
  <pre><code>&lt;div class=&quot;movie&quot; id=&quot;my_movie&quot;&gt;
  </code></pre>
  <p>and the following javascript code</p>
  <pre class="lang-js prettyprint-override"><code>var myMovie = document.getElementById('my_movie');
  myMovie.addEventListener('nv-enter', function (event) {
       console.log('change scope');
  });
  </code></pre>
  <p>Now I have a React Component, inside this component, in the render method, I am returning my div. How can I add an event listener for my custom event? (I am using this library for TV apps - <a href="https://github.com/ahiipsa/navigation" rel="noreferrer">navigation</a> )</p>
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  
  class MovieItem extends Component {
  
    render() {
  
      if(this.props.index === 0) {
        return (
          &lt;div aria-nv-el aria-nv-el-current className=&quot;menu_item nv-default&quot;&gt;
              &lt;div className=&quot;indicator selected&quot;&gt;&lt;/div&gt;
              &lt;div className=&quot;category&quot;&gt;
                  &lt;span className=&quot;title&quot;&gt;{this.props.movieItem.caption.toUpperCase()}&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        );
      }
      else {
        return (
          &lt;div aria-nv-el className=&quot;menu_item nv-default&quot;&gt;
              &lt;div className=&quot;indicator selected&quot;&gt;&lt;/div&gt;
              &lt;div className=&quot;category&quot;&gt;
                  &lt;span className=&quot;title&quot;&gt;{this.props.movieItem.caption.toUpperCase()}&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        );
      }
    }
  
  }
  
  export default MovieItem;
  </code></pre>
  <p>Update #1:</p>
  <p><a href="https://i.stack.imgur.com/9meJw.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/9meJw.jpg" alt="enter image description here" /></a></p>
  <p>I applied all the ideas provided in the answers. I set the navigation library to debug mode and I am able to navigate on my menu items only based on the keyboard (as you can see in the screenshot I was able to navigate to Movies 4) but when I focus an item in the menu or press enter, I dont see anything in the console.</p>
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  
  class MenuItem extends Component {
  
    constructor(props) {
      super(props);
      // Pre-bind your event handler, or define it as a fat arrow in ES7/TS
      this.handleNVFocus = this.handleNVFocus.bind(this);
      this.handleNVEnter = this.handleNVEnter.bind(this);
      this.handleNVRight = this.handleNVRight.bind(this);
    }
  
    handleNVFocus = event =&gt; {
        console.log('Focused: ' + this.props.menuItem.caption.toUpperCase());
    }
  
    handleNVEnter = event =&gt; {
        console.log('Enter: ' + this.props.menuItem.caption.toUpperCase());
    }
  
    handleNVRight = event =&gt; {
        console.log('Right: ' + this.props.menuItem.caption.toUpperCase());
    }
  
    componentDidMount() {
      ReactDOM.findDOMNode(this).addEventListener('nv-focus', this.handleNVFocus);
      ReactDOM.findDOMNode(this).addEventListener('nv-enter', this.handleNVEnter);
      ReactDOM.findDOMNode(this).addEventListener('nv-right', this.handleNVEnter);
      //this.refs.nv.addEventListener('nv-focus', this.handleNVFocus);
      //this.refs.nv.addEventListener('nv-enter', this.handleNVEnter);
      //this.refs.nv.addEventListener('nv-right', this.handleNVEnter);
    }
  
    componentWillUnmount() {
      ReactDOM.findDOMNode(this).removeEventListener('nv-focus', this.handleNVFocus);
      ReactDOM.findDOMNode(this).removeEventListener('nv-enter', this.handleNVEnter);
      ReactDOM.findDOMNode(this).removeEventListener('nv-right', this.handleNVRight);
      //this.refs.nv.removeEventListener('nv-focus', this.handleNVFocus);
      //this.refs.nv.removeEventListener('nv-enter', this.handleNVEnter);
      //this.refs.nv.removeEventListener('nv-right', this.handleNVEnter);
    }
  
    render() {
      var attrs = this.props.index === 0 ? {&quot;aria-nv-el-current&quot;: true} : {};
      return (
        &lt;div ref=&quot;nv&quot; aria-nv-el {...attrs} className=&quot;menu_item nv-default&quot;&gt;
            &lt;div className=&quot;indicator selected&quot;&gt;&lt;/div&gt;
            &lt;div className=&quot;category&quot;&gt;
                &lt;span className=&quot;title&quot;&gt;{this.props.menuItem.caption.toUpperCase()}&lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  
  }
  
  export default MenuItem;
  </code></pre>
  <p>I left some lines commented because in both cases I am not able to get the console lines to be logged.</p>
  <p>Update #2: This navigation library does not work well with React with its original Html Tags, so I had to set the options and rename the tags to use aria-* so it would not impact React.</p>
  <pre class="lang-js prettyprint-override"><code>navigation.setOption('prefix','aria-nv-el');
  navigation.setOption('attrScope','aria-nv-scope');
  navigation.setOption('attrScopeFOV','aria-nv-scope-fov');
  navigation.setOption('attrScopeCurrent','aria-nv-scope-current');
  navigation.setOption('attrElement','aria-nv-el');
  navigation.setOption('attrElementFOV','aria-nv-el-fov');
  navigation.setOption('attrElementCurrent','aria-nv-el-current');
  </code></pre>