title: scrollIntoView using React refs
body: <p>We are trying to scroll to a specific component when the user closes another component. </p>
  
  <p>Our example is very similar to that down below, taken from <a href="https://reactjs.org/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components" rel="noreferrer">https://reactjs.org/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components</a></p>
  
  <pre><code>function CustomComponents(props) {
    const items = [1,2,3,4].map((x, i) =&gt; return (
      &lt;div ref={props.inputRef} key={i}&gt;
       x + hello
      &lt;/div&gt;
    )
  
    return (
      &lt;div&gt;
        { items }
      &lt;/div&gt;
    );
  }
  
  function Parent(props) {
    return (
      &lt;div&gt;
        &lt;CustomComponents inputRef={props.inputRef} /&gt;
      &lt;/div&gt;
    );
  }
  
  
  class Grandparent extends React.Component {
    render() {
      return (
        &lt;Parent
          inputRef={el =&gt; this.inputElement = el}
        /&gt;
      );
    }
  }
  </code></pre>
  
  <p>We are rendering a big list of cards and want to be able to scroll to a specific card by calling <code>this.refs[elem].scrollIntoView()</code></p>
  
  <p>But our problem is that calling <code>this.refs</code> returns an empty object at all levels, and so we are unable to attach to a specific element and then fire it when the user arrives back to view this component. </p>
  
  <p>Would like some help on how one would go about solving this issue. </p>