title: ReactJS Events from the EventListener Don't Update The View
body: <p>I am basically trying to use the event listeners and add an event for the 'message' event which gets external events when this app is a webview in some mobile app. </p>
  
  <p>The problem is that the react component DOES NOT update when the event comes in. I can identifiy that the event does come into my event listener function however, literally the react component DOES NOT update even if i do setState. </p>
  
  <p>Here's my code:</p>
  
  <pre><code>    import React, { Component } from 'react';
      import logo from './logo.svg';
      import './App.css'; 
  
      var showIfEventHappenedAndReactUpdated = false;
  
      class App extends Component {
  
          componentDidMount() {
  
             //event listener to get events from external views
             //when this app is used as a webview for example
             document.addEventListener('message', function(e){
  
                //I can see the event coming through here
                //However, the react component itself doesn't update
                showIfEventHappenedAndReactUpdated = true;
  
                //I have even tried putting a this.setState({}) here but it doesn't work...as it doesn't update the react-component
  
             }) 
          }
  
        render() {
  
          if(showIfEventHappenedAndReactUpdated){
              return (
                &lt;div className="App"&gt;
                  &lt;p&gt;Event Occured and React Updated&lt;/p&gt;
                &lt;/div&gt;
              );
          }else{
              return (
                 &lt;div className="App"&gt;
                  &lt;p&gt;Event DID NOT OCCUR YET&lt;/p&gt;
                 &lt;/div&gt;
              );
          }
  
        }
      }
  
      export default App;
  </code></pre>
  
  <p>BUT if I get the 'p' tag internally like this </p>
  
  <pre><code>    import React, { Component } from 'react';
      import logo from './logo.svg';
      import './App.css'; 
  
  
  
      class App extends Component {
  
          componentDidMount() {
  
             //event listener to get events from external views
             //when this app is used as a webview for example
             document.addEventListener('message', function(e){
  
                document.getElementsByTagName('p')[0].innerHTML = "EVENT OCCURED"
             }) 
          }
  
        render() {
              return (
                &lt;div className="App"&gt;
                  &lt;p&gt;Event HAS NOT Occured&lt;/p&gt;
                &lt;/div&gt;
              );
          }
  
        }
      }
  
      export default App;
  </code></pre>
  
  <p>THEN it works. The only line change was </p>
  
  <pre><code>document.getElementsByTagName('p')[0].innerHTML = "EVENT OCCURED"
  </code></pre>
  
  <p>However, I need to actually update the react view instead of changing the text inside a raw DOM element. </p>
  
  <p>What do i need to do in order to achieve that?</p>