title: React Bidirectional component communication
body: <p>I am doing an app in react and the idea is to have a component lets call it component A which return function has :</p>
  
  <pre><code>                &lt;div&gt;
                              &lt;div&gt;
                                  &lt;ExtraComponent 1/&gt;
                                  &lt;ExtraComponent 2/&gt;
                              &lt;/div&gt;
                              &lt;div&gt;
                                    &lt;B /&gt;
                              &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>Component B has one subcomponent called C that it toggles when clicked ( component C will only render if showProperty is true )</p>
  
  <pre><code>  B = React.createClass({
        getInitialState: function() {
          return {
            showProperty: false
          }
        },
  
          handlerClick(e) {
          this.setState({
            showProperty: !this.state.showProperty
          });
          },
  
          render() {
              return (
                  &lt;div onClick= { this.handlerClick }&gt;
                      &lt;span&gt;B&lt;/span&gt;
              &lt;C showProperty={this.state.showProperty} /&gt;
                  &lt;/div&gt;
              );
          }
      });
  </code></pre>
  
  <p>What I want to do is when component B toggles his subcomponent (C) I want him to communicate to component A ( its father ) that that has happened so it can toggle both ExtraComponents.</p>
  
  <p>TLDR : I need a way for a component in react to communicate with its child and father at the same time.</p>
  
  <p>Thanks in advance .</p>
  
  <p>Greetings , John.</p>