how to send props with props component react

Question

Now, I'm trying send props to component from props, but I can't. What should I do?

Can someone tell me how to props component to props component (Focus header.jsx file I need to send the value in props of but I can't

Thank you.

index.js

ReactDOM.render(
    <HashRouter>
        <Provider store={store}>
            <Route component={App}/>
        </Provider>
    </HashRouter>,
    document.getElementById('root')
);

serviceWorker.unregister();

app.jsx

render() {
    const { location, lang } = this.props
    return (
    <MuiThemeProvider theme={theme}>
        <IntlProvider key={lang} locale={lang} messages={messages[lang]}>
        <Layout>
                <Switch>
                    <GuestRoute location={location} path='/' component={Welcome} exact/>
                    <GuestRoute location={location} path='/reset/:token' component={ForgotPassword} exact/>
                    <UserRoute location={location} path='/profile' component={Info} exact/>
                    <UserRoute location={location} path='/reset' component={ResetPassword} exact/>
                    <UserRoute location={location} path='/myrestaurant' component={MyRestaurant} exact/>
                    <UserRoute location={location} path='/myrestaurant/:resname' component={MyRestaurant} exact/>
                </Switch>
        </Layout>
        </IntlProvider>
    </MuiThemeProvider>
    );
}

layout.jsx

class InfoPage extends Component {
    render() {
        const { isAuthenticated } = this.props
        return (
            <div>
                { 
                    isAuthenticated 
                        ?
                        <HeaderAuth 
                            component={this.props.children}
                        />
                        :
                    <HeaderNAuth />
                }
                { !isAuthenticated && this.props.children }
            </div>
        )
    }
}

header.jsx

    render() {
        const { classes, locale, theme, logout } = this.props

        return(
            <div className={classes.root}>

                    {
                        this.props.component <-------------- HERE I NEED PROPS VALUE TO THIS COMPONENT ----------------> // what should i do
                    }

            </div>
        )
    }
} 

Answer 1

Here you can pass whole component in HeaderAuth.

class InfoPage extends Component {
    render() {
        const { isAuthenticated } = this.props
        return (
            <div>
                { 
                    isAuthenticated 
                        ?
                        <HeaderAuth newValue={'hello world'}> 
                          {this.props.children}
                        <HeaderAuth/>
                        :
                    <HeaderNAuth />
                }
                { !isAuthenticated && this.props.children }
            </div>
        )
    }
}

Now, Inside HeaderAuth, you can access that component inside this.props.children.

render() {
        const { classes, locale, theme, logout, newValue } = this.props

        return(
            <div className={classes.root}>
                {newValue}
                {this.props.children}
            </div>
        )
}

Answer 2

class Parent extends Component {
    render() { 
        return ( <div><Child component={this.props.children}/></div> );
    }
}

class Child extends Component{
    render(){
        return(<div>{this.props.component}I am a child which revieve component in props</div>)
    }
}

ReactDOM.render(<Parent>
    <div style={{color:"red"}}>I am the comppent passed as from parent to Child</div>
    </Parent>, document.getElementById("root"));