My question is "Is there a way to avoid sending callbacks deep in the tree when I want to access/react upon child components data".
I have a component Application
that contains a child component Person
which in turn contains a child component TraitCollection
which in turn contains a child component Trait
.
When Trait
is changed I want to send data back to Application
to be forwarded to another child in Application
named PersonList
.
My current solution is to send callbacks as props to each child. Each callback function constructs and appends the data which finally reaches Application
where I pass it down as a prop to PersonList
.
I can imagine that "adding more levels", or splitting components up in more smaller parts will further complicate this callback chain.
Is there any other way to do this or is this the best way to handle passing data from children to parents in React?