title: React.js: how to set an active flag in one of multiple identical children?
body: <p>I have a parent component with multiple identical children of which only one can be active at a time. The active state is to be set through an internal event on the child itself e.g. a button click, and not by the parent. I want the active state to be unset by a call from a sibling but I cant find a way for siblings to call eachother's methods. Ive tried refs but they are only accessible from the parent and i cant find a way to make a child ref available within itself without maintaining a list of refs on the parent which i dont want as i only need to store the currently active one.</p>
  
  <p>Simple example</p>
  
  <p>e.g. </p>
  
  <pre><code>&lt;Parent&gt;
    &lt;Child active={false}/&gt;
    &lt;Child active={false}/&gt;
    &lt;Child active={true}/&gt;
  &lt;/Parent&gt;
  </code></pre>
  
  <p>where a child is something like</p>
  
  <pre><code>export class Child extends React.Component {
    constructor() {
      super(props);
      state  = {
       active: props.active; 
      }
    } 
  
    setActive(active) {
      setState ({active : active});
    }
  
    onclick = () =&gt; {
       // get currently active other sibling?
       // call setActive direct on other sibling.
       // e.g. other.setActive(false);
  
       // set current to active using the same method
       this.setActive(true);
    }
    render() {
      return (
        &lt;button onclick={this.onclick}/&gt;
        &lt;p&gt;current state={this.state.active ? "active": "inactive"}
      );
    }
  }
  </code></pre>
  
  <p>I've tried passing in parent setActiveRef and getActiveRef functions as props to the children to maintain a single shared ref (the active one) and use getActiveRef().current.setActive directly but i cant find a way to access the ref of a child component from within itself to send to the setActiveRef() on the parent in the first place.</p>
  
  <p>any advice much appreciated. thanks</p>