I am using react and basic flux to do a data entry web app. So I have a root component which communicates with a store, gets the complex data object which is something like this.
On the change of an option select element, I fire an action which would bring another relevant object with a similar structure to above.
I manage this massive object as the root state of my data entry page and pass down data as props to various components.
The leaf level of this object, I have bound the to an Input element. So it changes when the object changes. All of these changes trickled down from the following state change at the root component.
MeasurementStore.getAllMeasurements().then((measurements) => {
this.setState({
measurements : measurements
});
});
But in my case, the values at the leaf level do not change corresponding to the state change. But when I add the following
MeasurementStore.getAllMeasurements().then((measurements) => {
this.setState({
measurements : {}
});
this.setState({
measurements : measurements
});
});
it starts working properly and the leaf-level values change accordingly. Why does this happen?
Figured it out. I was maintaining state in a reusable "custom" input that I had written so the changes were not trickling down as expected since the child element was basing on its own state.
removed state and its "props" all the way to the end!
Lessons learnt! always try to lift your state up!