Q:

With React, how to access the render return value of a child component

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 render() 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. 
Here's a very simplified example of what I'm trying to achieve:
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(
    <Enhancer>
        <Container />
    </Enhancer>
)

// Expected: HelloDearWorld

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?  
Thanks! 
Edit: Solution! 
function withSpecialContent(WrappedComponent, content) {
    return class extends React. Component {
        render() {
            return <WrappedComponent>
                { content }
            </WrappedComponent>;
        }
    }
}

class Enhancer extends React. Component {
    render() {
        return content.splice(1, 0, 'Dear');
    }
}

render(
    withSpecialContent(Enhancer, ['Hello', 'World']);
)

// Result: HelloDearWorld

A:

I believe what you need is HOC: 
https://reactjs.org/docs/higher-order-components.html

