title: How to scroll to a component from another component in React?
body: <p>I have a form that, on submission displays the results of the form, but more importantly, scrolls to a component that shows the results. I am stuck trying to pass in refs and forward refs. All of the demos I've seen have been of components in the same file. My setup is as follows:</p>
  <p>The <code>App.js</code> holds two components– <code>Form.js</code> which submits the form and <code>Results.js</code> which displays the results of the form submission. The <code>Results.js</code> component is further down the page so I want to scroll to that component once the user clicks enter on the form.</p>
  <p>Here is a <a href="https://codesandbox.io/s/youthful-ride-slq001?file=/src/Form.js" rel="nofollow noreferrer">codesandbox</a> that demonstrates my setup.</p>
  <p>Here is the same code on here:</p>
  <pre class="lang-js prettyprint-override"><code>// App.js
  import &quot;./styles.css&quot;;
  import Form from &quot;./Form&quot;;
  import Results from &quot;./Results&quot;;
  
  export default function App() {
    return (
      &lt;&gt;
        &lt;Form /&gt;
        &lt;Results /&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>// Form.js
  import { forwardRef, useState } from &quot;react&quot;;
  
  const Form = forwardRef(({ onScroll }, ref) =&gt; {
    const [name, setName] = useState(&quot;&quot;);
  
    const onSubmit = (e) =&gt; {
      e.preventDefault();
      onScroll();
    };
  
    return (
      &lt;form onSubmit={onSubmit} className=&quot;tall&quot;&gt;
        &lt;input value={name} onChange={(e) =&gt; setName(e.target.value)} /&gt;
        &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
    );
  });
  
  export default Form;
  
  
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>// Results.js
  
  import { useRef } from &quot;react&quot;;
  export default function Results() {
    const resultsRef = useRef();
  
    function handleScrollToResults() {
      resultsRef.current.scrollIntoView({ behavior: &quot;smooth&quot; });
    }
  
    return (
      &lt;div onScroll={handleScrollToResults}&gt;
        &lt;h1&gt;Results&lt;/h1&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>