In a composited component, how can child access the state property of top most
For simplification, I have a a component, that includes a subcomponent. The top parent component is the only stateful compontent. But the state of this needs to be set on children deep within. How can these children access the state of the top most parent?
Is passing the state down via props
the only way? I ask because I have a comonent that has many children deep down, so to access state I would have to pass state as a prop to 5 levels, just so 5th level can access state.
For a simplified example:
var Timer = React.createClass({
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},
componentDidMount: function() {
this.interval = setInterval(this.tick, 1000);
},
componentWillUnmount: function() {
clearInterval(this.interval);
},
render: function() {
return (
<Label />
);
}
});
var Label = React.createClass({
render: function() {
return (
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>
);
}
});
ReactDOM.render(<Timer />, mountNode);
This example gives this.state is null
Answer
There are in general two well accepted ways to do this.
- Indeed pass the properties down the tree of components. This can sometimes work very well, and is something I personally use a lot for more UI work in the components, like making sure a pagination works generically all over the app (total pages, currentpage, items per page). For more app 'state' kind of things this is generally not the right approach
- Switch to something to manage your application state, like Flux, which will help you with the concept of a store to keep this state in, if both components need this. I use the alt implementation, but Facebook's official and other ones are also very well known.
In general I'd advise you to dive a bit into some videos of React and Flux, perhaps the ones where people show you how they do certain things like this. For example this one.
Related Questions
- → 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?