title: calling a method of a particular child ref in react when there are multiple components
body: <p>I have a parent component which is a set of child filter menu components. Each child component has a group of radio buttons, and the buttons all determine whether they are checked via their state. </p>
  
  <p>In the parent component, when there is at least one filter for which the user has made a selection, a list of buttons appears of the selected filter options.</p>
  
  <p>When one of these buttons is clicked, it should call a function within that child component to reset its radio groups.</p>
  
  <p>I have seen <a href="https://stackoverflow.com/questions/37949981/call-child-method-from-parent">here</a> and <a href="https://codesandbox.io/s/l70krvpykl" rel="nofollow noreferrer">here</a> how to call a function within a single child ref when that ref is known, but how would I accomplish this when the refs are generated in a loop, and I want to only to call the ref of the specific child component that matches the button that was clicked?</p>
  
  <p>Here is the relevant [pseudo-code]:</p>
  
  <pre><code>//FILTERS.JS
  {filters.map((filter, index) =&gt; {
      return (
          &lt;FilterContainer
              key={`filter--${filter.id}`}
              //NEED UNIQUE REF HERE THAT I CAN CALL
          /&gt;
      )
  })}
  
  handleClearSelectedFilter = ()=&gt;{
      this.[matchingFilterContainerRef].current.resetRadioGroup();
  }
  </code></pre>
  
  <p>where <code>matchingFilterContainerRef</code> would be the dynamic ref I match to the button that was clicked for the corresponding <code>filterContainer</code> child component.</p>