title: Use ref in Higher Order Components
body: <p>I have a <code>Table</code> component that I want <code>ref</code> to be attached to.</p>
  
  <p>Use: <em>Table.js</em></p>
  
  <pre><code>class Table extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        rows: 1,
        dataLength: props.dataLength,
      }
      this.tableRef = React.createRef(); 
    }
  
    componentDidUpdate() {
      //using ref
      this.tableRef.current ..... //logic using ref
      this.state.rows ..... //some logic
    }
  
    render() {
      &lt;TableContainer ref={this.tableRef} /&gt;
      &lt;CustomPagination /&gt;
    }
  }
  </code></pre>
  
  <p>This works fine, but now my requirement has changed, and I want to reuse the Table component with pagination applied to all the Tables in my App. I have decided to make a HOC <code>withCustomPagination</code>.</p>
  
  <p>Use: <em>withCustomPagination.js HOC</em></p>
  
  <pre><code>import CustomPagination from 'path/to/file';
  
  const withCustomPagination = tableRef =&gt; Component =&gt; {
    return class WithCustomPagination extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          rows: 1,
          dataLength: props.dataLength,
        }
      }
  
      componentDidUpdate() {
        tableRef.current.state ..... //logic using ref, Error for this line
        this.state.rows ..... //some logic
      }
  
      render() {
        return (
          &lt;Component {...state} /&gt;
          &lt;CustomPagination /&gt;
        )
      }
    }
  }
  
  export default withCustomPagination;
  </code></pre>
  
  <p>New <em>Table.js</em>:</p>
  
  <pre><code>import withCustomPagination from '/path/to/file';
  
  const ref = React.createRef();
  
  const Table = props =&gt; (
    &lt;TableContainer ref={ref} /&gt;
  );
  
  const WrappedTable = withCustomPagination(ref)(Table);
  </code></pre>
  
  <p>HOC <code>withCustomPagination</code> returns a class <code>WithCustomPagination</code> that has a <code>componentDidUpdate</code> lifecycle method that uses Table ref in the logic. So I try to pass <code>ref</code> created in <em>Table.js</em> as argument to <code>withCustomPagination</code>, i.e curried with <code>ref</code> and <code>Table</code> stateless component. </p>
  
  <p>This use of <code>ref</code> is wrong and I get error: <code>TypeError: Cannot read property 'state' of null</code>.</p>
  
  <p>I tried using <em>Forwarding Refs</em>, but was unable to implement it.</p>
  
  <p>How do I pass the Table <code>ref</code> to <code>withCustomPagination</code> and be able to use it in HOC? </p>