Rifton007 Rifton007 - 3 months ago 16
React JSX Question

pass {...this.state} with {this.props.children}

Hi all and thanks for your time.

I see a tutorial with lynda.com for React.js.
But, it used a old version of React.
His code:

render: function(){
return (
<div>
<Header title={this.state.title} status={this.state.status}/>
<RouteHandler {...this.state} />
</div>
)
}





But i use a new version of React 15.2.1 and React-router 2.5.2.
And i don't know how pass {...this.state} with {this.props.children}

render: function(){
return (
<div>
<Header title={this.state.title} status={this.state.status}/>
{this.props.children}
</div>
)
}


Thank you, everyone

Answer

in order to pass some props to {this.props.children}, you can use React.cloneElement.The resulting element will have the original element's props with the new props merged in shallowly.

render: function(){ 
    return (
    <div>
        <Header title={this.state.title} status={this.state.status}/>
        {React.cloneElement(this.props.children,this.state)} 
    </div>
    )
}