title: Passing messages between components in React.js
body: <p>I had a few questions about the communication between React.js components. This is in context to without the use of redux. Here is what my component hierarchy looks like.</p>
  
  <pre><code>       App
        /  \
       /    \
      |      |
      ▼      ▼
   Board   Dashboard
     |
     ▼ 
   Cell
  </code></pre>
  
  <p>Below are a few assumptions/patterns that i use for components to communicate. </p>
  
  <ol>
  <li><p>If we need to pass messages from a parent component to child
  components we do that using props. For example, while creating a
  Board we pass rows, cols as props.</p>
  
  <pre><code>&lt;Board rows={5} cols={5} /&gt;
  </code></pre></li>
  <li><p>If we need to pass messages from a child component to parent
  components we do it by passing a callback. For example we pass a
  play() callback from Board to Cell. Within Cell, we set the onClick
  handler to be the passed callback i.e. play().</p>
  
  <pre><code>&lt;Cell onClick={this.props.play(this.props.id)} /&gt;
  </code></pre></li>
  <li><p>The open question i had was how can be pass messages between sibling
  components (example Dashboard to Cell). One use-case is resetting my
  Board component when a reset button within Dashboard component is
  clicked. Here is what reset button within Dashboard looks like. My
  question is once the reset message reaches App component, whats the
  best practice to pass it down to Board?</p>
  
  <pre><code>&lt;input type="button" value="reset" onClick={this.props.reset} /&gt;
  </code></pre></li>
  </ol>
  
  <p>Would be great to get some feedback on 1 and 2. Also, the best practice for 3.</p>