I have a parent component with a child component.
Child component…
<div>
<TaskList isMaterialCoordinator={this.props.isMaterialCoordinator} filters={this.state.filters}></TaskList>
</div>
It gets filters from the parent. When filters change it should re-render the child component.
I change filters then update via setState when they change…
handleFilterUpdate(values) {
this.setState({
filters: values
});
}
The child component (TaskList), is created via createComponent from react-meteor-data like so.
export default createContainer(() => {
Meteor.subscribe('tasks');
return {
tasks: Tasks.find().fetch(),
incompleteCount: Tasks.find({ checked: { $ne: true } }).count()
};
}, TaskList);
My issue is that when the filters change, this child component tasklist does not get re-rendered.
If i remove the createContainer wrapper then it calls render when the filters change
I was able to solve it by not using createContainer in the child, and using it in the parent. Then passed down tasks to the child component via a prop.
So the child component became.
<div>
<TaskList tasks={this.props.tasks} isMaterialCoordinator={this.props.isMaterialCoordinator} filters={this.state.filters}></TaskList>
</div>
I still can’t explain why my first solution didnt work though? Why would react not have triggered a child component re-render when the filters changed in the parent component?
New to meteor/react so any help would be great, as createComponent was used in the tutorial.