title: React passing props to children while overwriting parent's parent props
body: <p>I'm going to use an example to explain the functionality I'm looking. </p>
  
  <pre><code> const Grandparent = React.createClass({
      render: function(){
          return (&lt;div&gt;
                      &lt;Parent&gt;
                          &lt;button className={this.props.parentClassName} /&gt;
                      &lt;/Parent&gt;
                  &lt;div&gt;
                      )
      }
  });
  
  const Parent = React.createClass({
          render: function(){
              const childrenWithProps = React.Children.map(this.props.children, (child) =&gt; {
                  return React.cloneElement(child, {parentClassName: 'Murphy'});
              });
              return (&lt;div&gt;
                  {childrenWithProps}
              &lt;/div&gt;)
          }
      });
  </code></pre>
  
  <p>What I would like is for the Parent component to intercept the props.parentClassName set in GrandParent and change it, or create it if it doesn't exist.</p>
  
  <p>Inorder for the button to receive the correct parentClassName I have to create a custom Button component to receive the props just from the Parent component, like so</p>
  
  <pre><code>React.createClass({
      render: function(){
          return (&lt;button className={this.props.parentClassName} /&gt;)
      }
  });
  </code></pre>
  
  <p>I want to avoid this if possible, because it extracts away code that I would like to be visible when declaring the initial component.</p>
  
  <p>So I would like this</p>
  
  <pre><code> React.createClass({
          render: function(){
              return (&lt;div&gt;
                          &lt;Parent&gt;
                              &lt;button className={
  //From Parent Component and not the GrandParent Component
  this.props.parentClassName
  
  } /&gt;
                          &lt;/Parent&gt;
                      &lt;div&gt;
                          )
          }
      });
  </code></pre>
  
  <p>instead of this</p>
  
  <pre><code> React.createClass({
          render: function(){
              return (&lt;div&gt;
                          &lt;Parent&gt;
                              &lt;Button /&gt;
                          &lt;/Parent&gt;
                      &lt;div&gt;
                          )
          }
      });
  
  const Button = React.createClass({
          render: function(){
              return (&lt;button className={this.props.parentClassName} /&gt;)
          }
      });
  </code></pre>
  
  <p>Where the props.parentClassName is returned from the <code>&lt;Parent&gt;</code> component, and not the <code>&lt;GrandParent&gt;</code> component.</p>