title: How to clear interval function of one component from another?
body: <p><strong>Parent Component</strong></p>
  
  <pre><code>handleSubmitValidateInput: function(e){
      e.preventDefault();
      var data = {phone: this._phone.value, pwd: this._pwd.value}
      $.ajax({
          type: 'POST',
          data:data,
          url: 'http://localhost:3000/login',
          success: function(data){
              ReactDOM.render(&lt;Home UserDetails={data}/&gt;, document.getElementById('content'));
              var idleTime = 0;
              var interval = setInterval(function(){
                        // some code
                  });
              }, (1000));
          },
          error: function(error){
              console.log('Error login!!');
          }
      });
  },
  </code></pre>
  
  <p>I want to clear the <code>interval</code> from the <strong>Home</strong> component. How can I achieve this? Please explain this to me. The function below is of the <strong>Home</strong> component. 
  I want to clear the interval from logout function.</p>
  
  <pre><code>handleLogout: function(e){
      e.preventDefault();
      console.log('Cleared');
      localStorage.clear();
      ReactDOM.render(&lt;Login /&gt;, document.getElementById('content'));
  },
  </code></pre>