title: How to reset child elements' state?
body: <p>Let's say I have three elements that hold in state a counter that increments when clicked.</p>
  
  <p>If I click on one element, how do I reset the other counters to 0?</p>
  
  <p><a href="https://jsfiddle.net/69z2wepo/56827" rel="noreferrer">https://jsfiddle.net/69z2wepo/56827</a></p>
  
  <pre><code>const Parent = React.createClass({
      render() {
          const rows = [];
          for (let i = 0; i &lt; 3; i++) {
              rows.push(&lt;Child key={i} /&gt;);
          }
          return (
              &lt;ul&gt;
                  {rows}
              &lt;/ul&gt;
          );
      }
  });
  
  const Child = React.createClass({
      getInitialState() {
          return {counter: 0};
      },
      handleClick() {
          this.setState({counter: ++this.state.counter });
      },
      render() {
          return (
              &lt;div onClick={this.handleClick}&gt;
                  {this.state.counter}
              &lt;/div&gt;
          );
      }
  });
  
  ReactDOM.render(
      &lt;Parent /&gt;,
      document.getElementById('app')
  );
  </code></pre>