title: Can I pass ref with function component?
body: <p>-I am using <strong>function component</strong>.
  -for now I am using 3 components here, from that One is parent component and another 2 are child components. 
  -I need to access one child component methods or state to another child methods. I already done with class components with <strong>CreateRef</strong> but for now I need to use with function components but I am getting Null inside 'ref.current'. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export function SideBySideList(props) {
      const ref = React.createRef();
  
   //this is call inside ListPage after sucess
      function updateRightList(id) {
          ref.current.state.actualSearchedModel.Id = id
          ref.current.fetchDataAndUpdate();
      }
      function itemClicked(id) {
          updateRightList(id);
      }
      return (
          &lt;&gt;
              &lt;div className="col-12 no-padding"&gt;
                  &lt;div className={props.leftListLayoutClass}&gt;
                      &lt;ListPage
           updateRightList={updateRightList}
       /&gt;
                  &lt;/div&gt;
                  &lt;div className={props.rightListLayoutClass}&gt;
                      &lt;ListPage
                          ref={ref}
                      /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;&gt;
      );
  }</code></pre>
  </div>
  </div>
  </p>