title: Best practice for extending props of wrapped components
body: <p>please have a look at the following snippet:</p>
  
  <pre><code>class Placeholder extends React.Component {
    render() {
      return &lt;h1&gt;{this.props.title}&lt;/h1&gt;;
    }
  }
  
  class Wrapper extends React.Component {
    render() {
      const childs = React.Children.map(this.props.children, (child, idx) =&gt; {
        return React.cloneElement(child, {
          title: this.props.conf[child.props.name]
        });
      });
      return &lt;div&gt;{childs}&lt;/div&gt;
    }
  }
  
  function App() {
    const conf = {
      "1": "test1",
      "2": "test2",
    };
    return (
  
      &lt;div className="App"&gt;
        &lt;Wrapper conf={conf}&gt;
          &lt;Placeholder name="1" /&gt;
          &lt;Placeholder name="2" /&gt;
        &lt;/Wrapper&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>(link: <a href="https://codesandbox.io/s/93wwyz05ry" rel="nofollow noreferrer">https://codesandbox.io/s/93wwyz05ry</a>)</p>
  
  <p>In this I have a Wrapper and a Placeholder component. You can place Placeholders inside the Wrapper component; the Wrapper will receive a config prop, that includes information for the wrapped Placeholder components. The Placeholder components reference the relevant config value by providing a name.
  (please keep in mind: the example doesn‘t make much sense, but should only demonstrate the basic idea; you can think of it as a template engine)</p>
  
  <p>In the case that Placeholders are direct children of Wrapper this works totally great, but what I want to achieve is, that I can also deeply nest Placeholder components inside of Wrapper. So something like this, should also be possible:</p>
  
  <pre><code>&lt;Wrapper conf={conf}&gt;
      &lt;div&gt;
           &lt;Placeholder name="1" /&gt;
      &lt;/div&gt;
      &lt;Placeholder name="2" /&gt;
  &lt;/Wrapper&gt;
  </code></pre>
  
  <p>To achieve this I can think of two options at the moment:</p>
  
  <ol>
  <li>Create a recursive function in the Wrapper component, that just loops through all the children, grandchildren, etc.</li>
  <li>Change up the process: Add a function to Wrapper, that gets as a parameter Placeholder component and the specific configuration and returns an already extended Placeholder component. (~ HOC approach)</li>
  </ol>
  
  <p>Number 1 can be pretty bad for the performance I guess.</p>
  
  <p>Number 2 would work, but I don‘t really like it, as I would prefer to keep everything "together", like the basic idea/structure is at the moment.</p>
  
  <p>Am I right with the performance issues, or wouldn‘t it be too bad? Do you have another idea?</p>