How to reset child elements' state?
<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>