title: Scroll onClick using React.fowardRef is not working
body: <p>I would like to know how to use React <code>refs</code> to navigate to a specific component</p>
  <pre><code>function App() {
    let CompetencesRef = React.createRef();
    let ExperiencesRef = React.createRef();
    let FormationRef = React.createRef();
    let RecoRef = React.createRef();
    let refs = { CompetencesRef, ExperiencesRef, FormationRef, RecoRef }
    let scrollToRef = (reference) =&gt; {
      console.log(reference)
      reference.current.scrollIntoView({ behavior: 'smooth' })
    }
    return (
      &lt;ParallaxProvider&gt;
        &lt;ThemeProvider theme={theme}&gt;
          &lt;div className=&quot;App&quot;&gt;
  
            &lt;div className=&quot;hero&quot;&gt;
              &lt;HeaderApp refs={refs} scrollToRef={scrollToRef} /&gt;
              &lt;ApprochApp /&gt;
            &lt;/div&gt;
            &lt;Apropos /&gt;
            &lt;Competences ref={CompetencesRef} /&gt;
            &lt;Experiences ref={ExperiencesRef} /&gt;
            &lt;Formation ref={FormationRef} /&gt;
            &lt;Recom ref={RecoRef} /&gt;
            &lt;Contact /&gt;
            &lt;Footer /&gt;
  
          &lt;/div &gt;
        &lt;/ThemeProvider&gt;
      &lt;/ParallaxProvider&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p><strong>AppHeader</strong></p>
  <pre><code>const AppHeader = (props, refs, scrollToRef) =&gt; {
      console.log(props)
  
      return (
          &lt;div &gt;
              &lt;Headroom&gt;
                  &lt;MenuApp refs={props.refs} scrollToRef={props.scrollToRef} /&gt;
              &lt;/Headroom&gt;
  
          &lt;/div&gt;
  
      )
  }
  export default AppHeader
  </code></pre>
  <p><strong>AppMenu</strong></p>
  <pre><code>const MenuApp = (props, refs, scrollToRef) =&gt; {
      console.log(props)
      return (
          &lt;div className=&quot;menu sticky-inner grid-container&quot;&gt;
              &lt;div className=&quot;desktop-menu&quot;&gt;
                  &lt;div className=&quot;menu-item a-propos&quot; ref={props.refs.CompetencesRef} onClick={() =&gt; props.scrollToRef(props.refs.CompetencesRef)}&gt;
                      &lt;p className='button'&gt;Compétences&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;menu-item competences&quot; ref={props.refs.ExperiencesRef} onClick={() =&gt; props.scrollToRef(props.refs.ExperiencesRef)} &gt;
                      &lt;p className='button'&gt;Experiences &lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;menu-item experiences&quot; ref={props.refs.FormationRef} onClick={() =&gt; props.scrollToRef(props.refs.FormationRef)}&gt;
                      &lt;p className='button'&gt;Formation&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;menu-item formation&quot; ref={props.refs.RecoRef} onClick={() =&gt; props.scrollToRef(props.refs.RecoRef)}&gt;
                      &lt;p className='button'&gt;Recomendations &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;p className=&quot;mobile-menu&quot;&gt;
                  &lt;MenuIcon /&gt;
              &lt;/p&gt;
              &lt;div className=&quot;github-ico&quot;&gt;
                  &lt;GitHubIcon /&gt;
              &lt;/div&gt;
              &lt;div className=&quot;linkedin-ico&quot;&gt;
                  &lt;LinkedInIcon /&gt;
              &lt;/div&gt;
              &lt;div className=&quot;contact&quot;&gt;
                  &lt;div className='contact-btn'&gt;
                      &lt;span className=&quot;contact-ico&quot;&gt; &lt;MessageIcon /&gt;&lt;/span&gt;  &lt;span style={isBrowser ? { display: 'block' } : { display: 'none' }} &gt; contact &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  export default React.forwardRef(MenuApp) 
  </code></pre>
  <p>I'm using a ClickHandler in Apps.js with <code>scrollIntoView</code>. But actually when I  click view does not scroll.</p>
  <p>I would not use packages like <a href="https://www.npmjs.com/package/react-scroll" rel="nofollow noreferrer">react-scroll</a></p>