I have set up my code like this:
// Parent.js
class Parent extends React.Component {
render() {
return { this.props.children }
}
}
// Child.js
class Child extends React.Component {
render() {
let message;
const greet = this.context.store.parentState.greet;
if(greet) message = 'Hello, world!';
return (
<div>
{ message }
</div>
)
}
}
Child.contextTypes = {
store: PropTypes.object.isRequired
}
// App.js
<Parent>
<Route path='/a-path' component={ Child } />
</Parent>
However, when the Parent component receives new state through setState, its render method is called but the render method in the Child component is not being called!
I need the Child component to update its logic based on the state of the Parent component. I found that passing the state of Parent via context and accessing it in the Child component using this.context.parentState works because it triggers a call to the render method of the Child component due to the new context.
Although context seems to solve the issue, I'm wondering if there's another way around this problem without relying on context?