React require.ensure. Cant read props of component loaded by require

Question

I'm just trying to make my components in react to load on demand with require ensure. For this case i use high order component like this:

import React from 'react';

export default class AsyncCp extends React.Component {

    constructor(props) {
        super(props);
        this.state = {component: null};
    }
    componentDidMount() {
        require.ensure([], (require) => {
            const Component = require('./cp').default;
            this.setState({
                component: Component
            });
        });
    }

    render() {
        if (this.state.component) {
            return <this.state.component />
        }
        return (<div>loading</div>);
    }

}

And its works fine as long as I do not have to use this.props in my component that loaded by require. So, if component ('./cp' in previous code) looks simple like this:

export default class Cp extends React.Component {

    render() {
        return(
            <div>
                test
            </div>
        )
    }
}

It load, but when i trying to use this.props in this component I'm getting '{}' empty object, of course. So, the question is - how can i pass a props from my high order component (AsyncCp) to my Cp component?

Thank you in advance.

Answer 1

You mostly have this all figured out,

In the render method of AsyncCp

render() {
    if (this.state.component) {
        return <this.state.component test={'works'} />
    }
    return (<div>loading</div>);
}

Then in the Cp component, you can use the prop like so:

export default class Cp extends React.Component {

    render() {
        return(
            <div>
                {this.props.test}
            </div>
        )
    }
}

Answer 2

So, the question is stupid. I just can pass props like this:

<this.state.component test="test" {...this.props}/>