title: How to use React.forwardRef in a class based component?
body: <p>I'm trying to use React.forwardRef, but tripping over how to get it to work in a class based component (not HOC).</p>
  
  <p>The docs examples use elements and functional components, even wrapping classes in functions for higher order components.</p>
  
  <p>So, starting with something like <a href="https://codesandbox.io/s/p5q8y5m86x" rel="noreferrer">this</a> in their <code>ref.js</code> file:</p>
  
  <pre><code>const TextInput = React.forwardRef(
      (props, ref) =&gt; (&lt;input type="text" placeholder="Hello World" ref={ref} /&gt;)
  );
  </code></pre>
  
  <p>and instead defining it as something like this:</p>
  
  <pre><code>class TextInput extends React.Component {
    render() {
      let { props, ref } = React.forwardRef((props, ref) =&gt; ({ props, ref }));
      return &lt;input type="text" placeholder="Hello World" ref={ref} /&gt;;
    }
  }
  </code></pre>
  
  <p>or</p>
  
  <pre><code>class TextInput extends React.Component {
    render() { 
      return (
        React.forwardRef((props, ref) =&gt; (&lt;input type="text" placeholder="Hello World" ref={ref} /&gt;))
      );
    }
  }
  </code></pre>
  
  <p>only working :/</p>
  
  <p>Also, I know I know, ref's aren't the react way. I'm trying to use a third party canvas library, and would like to add some of their tools in separate components, so I need event listeners, so I need lifecycle methods. It may go a different route later, but I want to try this.</p>
  
  <p>The docs say it's possible!</p>
  
  <blockquote>
    <p>Ref forwarding is not limited to DOM components. You can forward refs to class component instances, too.</p>
  </blockquote>
  
  <p>from the <a href="https://reactjs.org/docs/forwarding-refs.html#forwarding-refs-to-dom-components" rel="noreferrer">note in this section.</a></p>
  
  <p>But then they go on to use HOCs instead of just classes.</p>