Suppose I have these hierarchy of domain objects
ListObject
- field1
- ListChild
-
- childfield1
-
- listGrandchild
-
-
- grandchildfield1 ... the levels and so on
-
At first I was rendering like, e.g
App:
{listObject.map.(item => <CompObject currObject=item/>)
CompObject:
<div>this.props.currObject.field1</div>
{currObject.child.map.(item => <CompChild child=item/>)
...
CombChild:
<div>this.props.currChild.childfield1</div>
{currChild.grandchild.map.(item => <CompGrandChild grandChild=item/>)
...
and so on
But if I want to make a edit for e.g. this.props.currChild.childfield1, or make a button that only reload say, child X's list of grandchild, I can't because I passed in the root of a hierarchy of list of nested objects as props and they won't change?
But if I keep them as state in each constructor, future changes in the middle hierarchy of objects, say ChildX.childfield2, are no longer passed in?
So how should it be done for things that are really hierarchical and in list?