title: With React, how to access the render return value of a child component
body: <p>I have a React Component that replaces some content inside a string or array of strings, and I have another Component that does something similar. Both return, in their <code>render()</code> methods, an array of strings. Now I would like to combine them, and use the output of the second component as the input of the first one.</p>
  
  <p>Here's a very simplified example of what I'm trying to achieve:</p>
  
  <pre class="lang-js prettyprint-override"><code>class Container extends React.Component {
      render() {
          return ['Hello', 'World'];
      }
  }
  
  class Enhancer extends React.Component {
      render() {
          // Get actual content of the children,
          // not the React element.
          // How do I do that?
          const content = this.props.children;
  
          return content.splice(1, 0, 'Dear');
      }
  }
  
  render(
      &lt;Enhancer&gt;
          &lt;Container /&gt;
      &lt;/Enhancer&gt;
  )
  
  // Expected: HelloDearWorld
  </code></pre>
  
  <p>I have searched the Web and React's documentation, but I cannot find a way to do that. Is it possible to access the actual value of a child element in React? </p>
  
  <p>Thanks!</p>
  
  <p><strong><em>Edit: Solution!</em></strong></p>
  
  <pre class="lang-js prettyprint-override"><code>function withSpecialContent(WrappedComponent, content) {
      return class extends React.Component {
          render() {
              return &lt;WrappedComponent&gt;
                  { content }
              &lt;/WrappedComponent&gt;;
          }
      }
  }
  
  class Enhancer extends React.Component {
      render() {
          return content.splice(1, 0, 'Dear');
      }
  }
  
  render(
      withSpecialContent(Enhancer, ['Hello', 'World']);
  )
  
  // Result: HelloDearWorld
  </code></pre>