title: Reactjs: how to modify dynamic child component state or props from parent?
body: <p>I'm essentially trying to make tabs in react, but with some issues.</p>
  
  <p>Here's file <code>page.jsx</code></p>
  
  <pre><code>&lt;RadioGroup&gt;
      &lt;Button title="A" /&gt;
      &lt;Button title="B" /&gt;
  &lt;/RadioGroup&gt;
  </code></pre>
  
  <p><strong>When you click on button A, the RadioGroup component needs to de-select button B</strong>.</p>
  
  <p>"Selected" just means a className from a state or property</p>
  
  <p>Here's <code>RadioGroup.jsx</code>:</p>
  
  <pre><code>module.exports = React.createClass({
  
      onChange: function( e ) {
          // How to modify children properties here???
      },
  
      render: function() {
          return (&lt;div onChange={this.onChange}&gt;
              {this.props.children}
          &lt;/div&gt;);
      }
  
  });
  </code></pre>
  
  <p>The source of <code>Button.jsx</code> doesn't really matter, it has a regular HTML radio button that triggers the native DOM <code>onChange</code> event</p>
  
  <p><strong>The expected flow is:</strong></p>
  
  <ul>
  <li>Click on Button "A"</li>
  <li>Button "A" triggers onChange, native DOM event, which bubbles up to RadioGroup</li>
  <li>RadioGroup onChange listener is called</li>
  <li><strong>RadioGroup needs to de-select button B</strong>. This is my question.</li>
  </ul>
  
  <p>Here's the main problem I'm encountering: I <strong>cannot move <code>&lt;Button&gt;</code>s into <code>RadioGroup</code></strong>, because the structure of this is such that the children are <strong>arbitrary</strong>. That is, the markup could be</p>
  
  <pre><code>&lt;RadioGroup&gt;
      &lt;Button title="A" /&gt;
      &lt;Button title="B" /&gt;
  &lt;/RadioGroup&gt;
  </code></pre>
  
  <p>or</p>
  
  <pre><code>&lt;RadioGroup&gt;
      &lt;OtherThing title="A" /&gt;
      &lt;OtherThing title="B" /&gt;
  &lt;/RadioGroup&gt;
  </code></pre>
  
  <p><strong>I've tried a few things.</strong></p>
  
  <p><strong>Attempt:</strong> In <code>RadioGroup</code>'s onChange handler:</p>
  
  <pre><code>React.Children.forEach( this.props.children, function( child ) {
  
      // Set the selected state of each child to be if the underlying &lt;input&gt;
      // value matches the child's value
  
      child.setState({ selected: child.props.value === e.target.value });
  
  });
  </code></pre>
  
  <p><strong>Problem:</strong></p>
  
  <pre><code>Invalid access to component property "setState" on exports at the top
  level. See react-warning-descriptors . Use a static method
  instead: &lt;exports /&gt;.type.setState(...)
  </code></pre>
  
  <hr>
  
  <p><strong>Attempt:</strong> In <code>RadioGroup</code>'s onChange handler:</p>
  
  <pre><code>React.Children.forEach( this.props.children, function( child ) {
  
      child.props.selected = child.props.value === e.target.value;
  
  });
  </code></pre>
  
  <p><strong>Problem:</strong> Nothing happens, even I give the <code>Button</code> class a <code>componentWillReceiveProps</code> method</p>
  
  <hr>
  
  <p><strong>Attempt:</strong> I attempted to pass some specific state of the parent to the children, so I can just update the parent state and have the children respond automatically. In the render function of RadioGroup:</p>
  
  <pre><code>React.Children.forEach( this.props.children, function( item ) {
      this.transferPropsTo( item );
  }, this);
  </code></pre>
  
  <p><strong>Problem:</strong></p>
  
  <pre><code>Failed to make request: Error: Invariant Violation: exports: You can't call
  transferPropsTo() on a component that you don't own, exports. This usually
  means you are calling transferPropsTo() on a component passed in as props
  or children.
  </code></pre>
  
  <hr>
  
  <p><strong>Bad solution #1</strong>: Use react-addons.js <a href="http://facebook.github.io/react/docs/clone-with-props.html" rel="noreferrer">cloneWithProps</a> method to clone the children at render time in <code>RadioGroup</code> to be able to pass them properties</p>
  
  <p><strong>Bad solution #2</strong>: Implement an abstraction around HTML / JSX so that I can pass in the properties dynamically (kill me):</p>
  
  <pre><code>&lt;RadioGroup items=[
      { type: Button, title: 'A' },
      { type: Button, title: 'B' }
  ]; /&gt;
  </code></pre>
  
  <p>And then in <code>RadioGroup</code> dynamically build these buttons.</p>
  
  <p><a href="https://stackoverflow.com/questions/21758103/react-passing-props-to-descendants">This question</a> doesn't help me because I need to render my children without knowing what they are</p>