title: React Hooks Scroll to Element
body: <p>I am looking to write a React hook with React 16.8.6 that will let me scroll to a particular HTML element section on click of a navigation item. I have a <code>Navigation</code> component that is a sibling of the sections rendered on the page.</p>
  <p>Also when the page scrolls, I would like to update state of the <code>App</code> with that HTML section.</p>
  <h2>Navigation Component JSX</h2>
  <pre><code>&lt;ul class=&quot;nav&gt;
     &lt;li&gt;&lt;a&gt;Section 1&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a&gt;Section 2&lt;/a&gt;&lt;/li&gt;          
  &lt;/ul&gt;
  </code></pre>
  <h2>Sections in Home Page at App Level Component</h2>
  <pre><code>&lt;section className=&quot;section-1&quot;&gt;Section 1&lt;/section&gt;
  &lt;section className=&quot;section-2&quot;&gt;Section 2&lt;/section&gt;
  </code></pre>
  <h2>Hooks</h2>
  <pre><code>
  const [navItem, setNavItem] = React.useState(null);
  const sectionRef = React.useRef(null);
  
  // Scroll To Item
  useEffect(() =&gt; {
      console.log(sectionRef.current);
      if (sectionRef.current) {
        sectionRef.current.scrollToItem();
      }
  }, []);
  </code></pre>