title: How to access state / functions outside of react component
body: <p>I'm trying to implement the strategy design pattern to dynamically change how I handle mouse events in a react component.</p>
  <p>My component:</p>
  <pre><code>export default class PathfindingVisualizer extends React.Component {
      constructor(props) {
          super(props)
          this.state = {
              grid: [],
              mouseLeftDown: false,
          };
          const mouseStrat2 = null;     // Object I will change that has different functions for handling events
      }
  
      componentDidMount() {
          this.resetGrid();
          this.mouseStrat2 = new StartEndStrat();
      }
  
      render() {
          //buttons that change the object i want handling mouse events
      &lt;button onClick={() =&gt; this.mouseStrat2 = new StartEndStrat(this)}&gt;startendstrat&lt;/button&gt;
      &lt;button onClick={() =&gt; this.mouseStrat2 = new WallStrat(this)}&gt;wallstrat&lt;/button&gt;
      }
  }
  </code></pre>
  <p>I want my mouse strats that will access change the component with differing methods to handle mouse events</p>
  <pre><code>export class StartEndStrat {
      handleMouseDown(row, col) {
          // I want to access component state and call functions of the component
          this.setState({ mouseLeftDown: true });
          PathfindingVisualizer.resetGrid();
      }
      //other functions to change other stuff
  
      handleMouseEnter(row, col) {
          console.log('start end strat');
      }
  }
  
  export class WallStrat {
      handleMouseDown(row, col) {
          this.setState({ mouseLeftDown: true });
      }
  
      handleMouseEnter(row, col) {
          console.log('wallstrat');
      }
  }
  </code></pre>