title: Calling one component's function from another, unrelated component in React
body: <p>I am working on a stopwatch app using ReactJS and Electron. I have a Timer component, which keeps track of the time and displays the clock &amp; controls.</p>
  
  <p>The controls will be made up of three buttons: Play, Pause, and Stop. These Button components are completely unrelated to the Timer component. </p>
  
  <p>My question is: if I have a <code>handleStopClick()</code> function in the Timer component, how can I call it from the StopButton component?</p>
  
  <p>Note: there is currently no Play/Pause functionality. The Timer simply starts when mounted and a single Stop button should clear it. I'll add the rest when I've sorted this out.</p>
  
  <p>Here is Timer.jsx:</p>
  
  <pre><code>import '../assets/css/App.css';
  import React, { Component } from 'react';
  import PlayButton from './PlayButton'; // No function
  import PauseButton from './PauseButton';
  import StopButton from './StopButton';
  
  class Timer extends Component {
      constructor(props) {
          super(props);
          this.state = {
              isRunning: false,
              secondsElapsed: 0
          };
      }
  
      getHours() {
          return ('0' + Math.floor(this.state.secondsElapsed / 3600)).slice(-2);
      }
  
      getMinutes() {
          return ('0' + Math.floor(this.state.secondsElapsed / 60) % 60).slice(-2);
      }
  
      getSeconds() {
          return ('0' + this.state.secondsElapsed % 60).slice(-2);
      }
  
      handleStopClick() {
          clearInterval(this.incrementer);
      }
  
      componentDidMount() {
          this.isRunning = true;
          console.log(this.isRunning);
  
          var _this = this; // reference to component instance
  
          this.incrementer = setInterval( () =&gt; {
              _this.setState({
                  secondsElapsed: (_this.state.secondsElapsed + 1)
              });
          }, 1000)
      }
  
      playOrPauseButton() {
          if (this.isRunning) {return &lt;PauseButton /&gt;}
          else {return &lt;PlayButton /&gt;}
      }
  
      render() {
          return (
              &lt;div&gt;
                  {this.playOrPauseButton()}
                  &lt;StopButton /&gt; &lt;hr /&gt;
                  {this.getHours()} : {this.getMinutes()} : {this.getSeconds()}
              &lt;/div&gt;
          );
      }
  }
  
  export default Timer;
  </code></pre>
  
  <p>And StopButton.jsx:</p>
  
  <pre><code>import '../assets/css/App.css';
  import React, { Component } from 'react';
  import Timer from './Timer';
  
  class StopButton extends Component {
      handleClick () {
          console.log('this is: ', this);
          Timer.handleStopClick() // here's where I'd like to call Timer's function
      }
  
      render() {
          return (
              &lt;button onClick={(e) =&gt; this.handleClick(e)}&gt;
                  &amp;#9632;
              &lt;/button&gt;
          );
      }
  }
  
  export default StopButton;
  </code></pre>