title: How to access and change child's state from Parent component
body: <p>You are given uncontrollable child component.
  Parent component stores number of counters and renders that amount of child components. It has two buttons Add counter and Increment all counters.</p>
  <ol>
  <li><p>You are not allowed to edit child component.</p>
  </li>
  <li><p>Implement
  incrementCounters so that it increments counters of all child
  components that are rendered.</p>
  <p>incrementCounters = () =&gt; {
  // TODO: implement
  };</p>
  </li>
  </ol>
  <hr />
  <pre><code>export class ChildCounter extends React.Component{
      state = {
          counter: 0
      };
  
      increment = () =&gt; {
          this.setState(({ counter }) =&gt; ({
              counter: counter + 1
          }));
      };
  
      render() {
          return (
              &lt;div&gt;
                  Counter: {this.state.counter}
                  &lt;button onClick={this.increment}&gt;+&lt;/button&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  <hr />
  <pre><code>import {ChildCounter} from &quot;./Child&quot;;
  
  
  class App extends React.Component {
  
      state = {counters:1}
  
  
      addCounter = () =&gt; {
       let counterRn = this.state.counters + 1;
       this.setState({counters:counterRn})
      };
  
     incrementAll = () =&gt; {
  
     }
  
     render() {
     return (
         &lt;div&gt;
                  { new Array(this.state.counters).fill(0).map((_, index) =&gt; {
                      return &lt;ChildCounter key={index} /&gt;;
                  })
                  }
             &lt;br/&gt;
             &lt;button style={{marginRight:10}} onClick={this.addCounter}&gt;Add Counter&lt;/button&gt;
             &lt;button onClick={this.incrementAll}&gt;Increment all counters&lt;/button&gt;
         &lt;/div&gt;
     )
     }
  }
  </code></pre>