title: React JS how to avoid deep callbacks
body: <p>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".</p>
  
  <p>I have a component <code>Application</code> that contains a child component <code>Person</code> which in turn contains a child component <code>TraitCollection</code> which in turn contains a child component <code>Trait</code>.</p>
  
  <p>When <code>Trait</code> is changed I want to send data back to <code>Application</code> to be forwarded to another child in <code>Application</code> named <code>PersonList</code>.</p>
  
  <p>My current solution is to send callbacks as props to each child. Each callback function constructs and appends the data which finally reaches <code>Application</code> where I pass it down as a prop to <code>PersonList</code>.</p>
  
  <p>I can imagine that "adding more levels", or splitting components up in more smaller parts will further complicate this callback chain.</p>
  
  <p>Is there any other way to do this or is this the best way to handle passing data from children to parents in React? </p>