React JSX Spread Attribute in cloneElement
Ad
I am learning React and got stuck. Maybe someone can help. I have the following code:
React-router
ReactDOM.render(
<Router>
<Route path="/" component={App}>
<Route path="something" component={Something} />
</Route>
</Router>
,document.getElementById('react-container')
);
App
var App = React.createClass({
getInitialState: function() {
return {
status: 'ready',
title: 'The Title'
}
},
render: function() {
var childComp = null;
if(this.props.children) {
/*
This will work
childComp = React.cloneElement(this.props.children, {title: this.state.title, status: this.state.status});
*/
/*this wont*/
childComp = React.cloneElement(this.props.children, {...this.state});
}
return (
<div>
<Header title={this.state.title} />
{childComp}
</div>
);
}
});
Something:
var Something = React.createClass({
render: function() {
return (
<div>
<h1>Something</h1>
<h2>{this.props.title}</h2>
<h3>{this.props.status}</h3>
</div>
);
}
});
The problem is that App can have many many states. I dont want to manually write them like so:
React.cloneElement(this.props.children, {title: this.state.title, status: this.state.status})
But using JSX spread attributes wont work (syntaxerror)
Ad
Answer
Ad
React.cloneElement(this.props.children, this.state)
should work.
Ad
source: stackoverflow.com
Related Questions
Ad
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?
Ad