title: React: how to forward refs to multiple children?
body: <p>I'm trying to forward multiple refs to multiple children DOM nodes:<br>
  I need references to the 7 buttons, so I can manage focus between them.<br>
  I tried by using an array of <code>React.createRef()</code> and then attach each element of this array to a child using <strong>index</strong>, but all refs refers to the last button.<br>
  Why and is there another solution?</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>class RestaurantsList extends Component {
    references = Array(7).fill(React.createRef());
  
    render() {
      return (
        &lt;ul 
          id="restaurants-list"
          role="menu"
        &gt;
          {
            this.props.restaurants.map((restaurant, index) =&gt; {
              return (
                &lt;Restaurant 
                  ref={this.references[index]}
                  name={restaurant.name}
                /&gt;
              );
            })
          }
        &lt;/ul&gt;
      );
    }
  }
  
  const Restaurant = React.forwardRef((props, ref) =&gt; {
    return (
      &lt;li&gt;
        &lt;button 
          ref={ref}
        &gt;
          {name}
        &lt;/button&gt;
      &lt;/li&gt;
    );
  })</code></pre>
  </div>
  </div>
  </p>