title: Access Child component reference from Parent Component
body: <p>I am new to react and I am trying to access a child component reference from a callback method in the parent component. When I try to access the reference, I am seeing the reference as null.</p>
  <p>Parent Component</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import PropTypes from 'prop-types';
  import ChildComponentA from '../ChildComponentA';
  import ChildComponentB from '../ChildComponentB’;
  
  export default function ParentComponent(props) {
  
   const calendarRef = React.createRef();
  
  const handleYearClick = (value) =&gt; {
      // const ref = React.createRef();
      console.log('click:', value, calendarRef);
      // setSelectedView('month');
      // const calendarApi = calendarRef.current.getApi();
  };
  const handleFilterEvent = (value) =&gt; {
  const calendarApi = calendarRef.current.getApi();
  if (value.includes('next')) calendarApi.next();
  if (value.includes('prev')) calendarApi.prev();
  }
  
  return (
  
  &lt;section&gt;
  
  &lt;ChildComponentA
      defaultView=&quot;dayGridMonth&quot;
      eventData={allEvents}
      calendarRef={calendarRef}
       currentLang={currentLang}
  /&gt;
  &lt;ChildComponentB
   legendLabels={calendarLabels}
   currentYear={currentYear}
   yearEvents={allEvents}
  onClick={handleYearClick}
  
  /&gt;
  &lt;ChildComponentC
   onClick={handleFilterEvent}
  disableNextButton={disableNextButton}
  disablePrevButton={disablePrevButton}
  
  /&gt;
  
  &lt;section/&gt;
  );
  
  </code></pre>
  <p>I am using the full calendar libary inside my ChildComponentA and I am trying to access the calendar Api from the parent.</p>
  <p>The code in my child component A is,</p>
  <pre><code>export default function ChildComponentA(props) {
  const {
      eventData,
      defaultView,
      calendarRef,
      currentLang,
    } = props;
    return (
      &lt;section className={rootClass}&gt;
        &lt;FullCalendar
          ref={calendarRef}
          plugins={[dayGridPlugin]}
          initialView={defaultView}
          nowIndicator
          editable
          headerToolbar={false}
          weekNumbers
          contentHeight=&quot;auto&quot;
          events={eventList}
          dayMaxEventRows
          views={eventTimeGrid}
          eventOrder=&quot;-start&quot;
          eventClick={(event) =&gt; handleEventClick(event.event)}
          locale={currentLang}
        /&gt;
  &lt;/section&gt;
  );
  
  }
  </code></pre>
  <p>EDITED: Adding ChildComponentB code,</p>
  <pre><code>export default function ChildComponentB(props) {
  
  const MONTHNAMES = ['January', 'February', 'March', 'April', 'May', 'June','July', 'August', 'September', 'October', 'November', 'December',];
  
  const customDayClick = (date, events) =&gt; {
      if (date) {
        const yearNum = moment(date.date).month();
        const month = MONTHNAMES[yearNum];
        const goToDate = `${currentYear}-${month}-01`;
        onClick(goToDate);
      }
      if (events) {
        console.log('events:', events);
      }
  
      return null;
    };
  
  
  return (
      &lt;&gt;
        &lt;section className={rootClass}&gt;
          &lt;Calender
            id=&quot;yearCalendar&quot;
            allowOverlap
            displayHeader={false}
            dataSource={eventDataSource}
            displayWeekNumber={false}          
            onDayClick={customDayClick}
            year={currentYear}
            language={currentLang}
          /&gt;
  );
  }
  </code></pre>
  <p>When I console log calendarRef inside handleYearClick in the parentComponent, I see it as null . ({current: null} current: null). But when I try the same inside the handleFilterEvent method which is a callback from ChildComponentC, I see the reference of full calendar like this {current: FullCalendar}.  How do I get the reference of FullCalendar inside handleYearClick. What am i missing ? It would be great if some one can help me resolve this. Thank you in advance.</p>