title: React Hooks - Passing ref to child to use ScrollIntoView
body: <p>I have two components. A parent and a child.</p>
  <p>Inside the parent component I have a button. If the user clicks on that button I want to do a ScrollIntoView to another button inside the child component.</p>
  <p>I guess I want to define a reference to the childs button a so that I inside the parent button onClick can do a:</p>
  <pre><code>ref.scrollIntoView({block: 'end', behavior: 'smooth'});
  </code></pre>
  <p>that will scroll to the button in the child component.</p>
  <p>Here is a minified example:</p>
  <h2>ParentComponent.jsx</h2>
  <pre><code>import React, {useRef} from 'react';
  import ChildComponent from './ChildComponent';
  
  const ParentComponent = props =&gt; {
    const childReference = useRef(null);
  
    const onClick = () =&gt; {
      childReference.scrollIntoView({block: 'end', behavior: 'smooth'});
    }
  
    return (
      &lt;&gt;
        &lt;...some other components&gt;
        &lt;Button onClick={onClick}&gt;Click me to be forwarded&lt;/Button&gt;
        &lt;ChildComponent ref={childReference}/&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  <h2>ChildComponent.jsx</h2>
  <pre><code>import React from 'react';
  
  const ChildComponent = (props, ref) =&gt; {
  
    const { name, value, description } = props;
  
    return (
      &lt;...some other components&gt;
      &lt;Button ref={ref}&gt;You should be forwarded to me&lt;/Button&gt;
    );
  };
  
  ChildComponent.propTypes = {
    name: PropTypes.string.isRequired,
    value: PropTypes.number,
    description: PropTypes.string,
  };
  
  ChildComponent.defaultProps = {
    value: 0,
    description: '',
  };
  
  export default React.forwardRef(ChildComponent);
  </code></pre>
  <p>I know the above code <strong>doesn't work</strong>, it was just to illustrate what I am trying to achieve.</p>
  <p>I have really tried every other solution I have been able to find by Googling and they all seem so easy, but none of them seem to work for my use case. I have tried using forwardRef as well, but that also doesn't fix it for me.</p>
  <h3>UPDATE</h3>
  <p>I guess I was a little vague on what's not working. I've been getting a lot of different error messages with the implementation.</p>
  <p>The following is one of them:</p>
  <blockquote>
  <p>Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?</p>
  </blockquote>
  <h1>Solution</h1>
  <p>Okay. I thought I'd assemble the pieces here with the solution provided by @Vencovsky.</p>
  <p>This is the full implementation with the two example components seen in the question:</p>
  <h2>ParentComponent.jsx</h2>
  <pre><code>import React, { useRef } from 'react';
  import ChildComponent from './ChildComponent';
  
  const ParentComponent = props =&gt; {
    const childReference = useRef(null);
  
    const scrollIntoView = () =&gt; {
      childReference.current.scrollIntoView({block: 'center', inline: 'center', behavior: 'smooth'});
    }
  
    return (
      &lt;&gt;
      &lt;...some other component&gt;
      &lt;Button onClick={scrollIntoView}&gt;Click me to be forwarded&lt;/Button&gt;
      &lt;ChildComponent ref={childReference}
      &lt;/&gt;
    );
  };
  
  export default ParentComponent;
  </code></pre>
  <h2>ChildComponent.jsx</h2>
  <pre><code>import React, {forwardRef} from 'react';
  import PropTypes from 'prop-types';
  
  const ChildComponent = forwardRef((props, ref) =&gt; {
    const { name, value, description } = props;
  
    return(
      &lt;&gt;
        &lt;...some other components&gt;
        &lt;Button ref={ref}&gt;You should be forwarded to me&lt;/Button&gt;
      &lt;/&gt;
    );
  });
  
  ChildComponent.propTypes = {
    name: PropTypes.string.isRequired,
    value: PropTypes.number,
    description: PropTypes.string,
  };
  
  ChildComponent.defaultProps = {
    value: 0,
    description: '',
  };
  
  export default ChildComponent;
  </code></pre>