title: Any to any component communication in React
body: <p>Flowchart of my project structure:</p>
  
  <p><a href="https://i.stack.imgur.com/WhkSA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WhkSA.jpg" alt="enter image description here"></a></p>
  
  <p>My question is about any-to-any (a2a) component communication. I have a working solution using props, but wondering what the correct way to handle Any-to-Any event handling as seen in my flowchart. </p>
  
  <p>The props solution does not seem bloated, but my app is barely beyond the scale of a todo app. Which direction should I go in given the logic of my flow chart?</p>