title: React - Ref to child component from parent
body: <p>Overview:<br>
  Example layout:<br>
  A B <strong>C</strong> D E F<br>
  <em>G H I J</em></p>
  
  <p>I have a grid of items (A,B,C,D,E,F). When an item is clicked (C), a list of sub items appears underneath (G,H,I,J). In order to make this accessible when tabbing, once an item is clicked, focus moves in to the list of sub items. However, once all of those items are tabbed through, I would like focus to move on to the next main item (D).  </p>
  
  <p>Problem:<br>
  I am adding refs to A,B,C,D,E and F, but I can't seem to access the refs in my grid in order to update the focus.</p>
  
  <p>// Item</p>
  
  <pre><code>constructor(props) {
      super(props);
      this.ref = React.createRef();
  }
  getItemRef() {
      return this.ref;
  }
  render() {
      return (
          &lt;a ref={this.ref}&gt;Stuff&lt;/a&gt;
      );
  }
  </code></pre>
  
  <p>// Parent</p>
  
  <pre><code>renderItems() {
      return (
          &lt;React.Fragment&gt;
              &lt;Item&gt;
              &lt;Item&gt;
              &lt;Item&gt;
          &lt;/React.Fragment&gt;
      );
  }
  render() {
      return (
          &lt;Grid&gt;
              {this.renderItems()}
          &lt;/Grid&gt;
      );
  }
  </code></pre>
  
  <p>// Grid</p>
  
  <pre><code>componentWillReceiveProps(nextProps) {
      React.Children.forEach(this.props.children, function(child) {
          console.log(typeof child.getItemRef === 'function'); // always false
      });
  }
  </code></pre>