title: React - Individual Counter Components - Parent Increase/Decrease All
body: <p>WARNING: REACT NEWBIE WHO IS STILL VERY MUCH LEARNING.</p>
  
  <p>I have a challenge that is requiring me to build a simple React Counter app. The rules are: No use of Redux, no use of hooks. Each counter functions independently to increment or decrement with a button click. AND! The Parent component can increment or decrement ALL Counter components.</p>
  
  <p>EX of individual increment/decrement:</p>
  
  <p>Counter 1 = 2</p>
  
  <p>Counter 2 = 4</p>
  
  <p>Counter 3 = 6</p>
  
  <p>EX Increment ALL will make the following changes:</p>
  
  <p>Counter 1 = 3</p>
  
  <p>Counter 2 = 5</p>
  
  <p>Counter 3 = 7</p>
  
  <p>I know this involves a callback function defined within the parent component, I'm just confused as to how  to implement this. I have a very non-efficient way of doing this in place now. Can anyone lead me in the right direction of how to setup this up in a more efficient way?</p>
  
  <p>Here is my <strong>Parent</strong>:</p>
  
  <pre><code>import React from 'react';
  import Counter from './components/Counter';
  
  class App extends React.Component {
  
    constructor(props) {
      super(props);
      this.counterElement1 = React.createRef();
      this.counterElement2 = React.createRef();
      this.counterElement3 = React.createRef();
    }
  
    handleAllIncrease = () =&gt; {
      console.log("hello App Increase")
      this.counterElement1.current.handleIncrease();
      this.counterElement2.current.handleIncrease();
      this.counterElement3.current.handleIncrease();
    }
  
    handleAllDecrease = () =&gt; {
      console.log("hello App Decrease")
      this.counterElement1.current.handleDecrease();
      this.counterElement2.current.handleDecrease();
      this.counterElement3.current.handleDecrease();
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;button onClick={() =&gt; this.handleAllIncrease()}&gt;Increase all&lt;/button&gt;
          &lt;button onClick={() =&gt; this.handleAllDecrease()}&gt;Decrease all&lt;/button&gt;
            &lt;Counter  ref={this.counterElement1} /&gt;
            &lt;Counter  ref={this.counterElement2}/&gt;
            &lt;Counter  ref={this.counterElement3}/&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>Here is my <strong>Child</strong>:</p>
  
  <pre><code>import React from 'react';
  
  
  class Counter extends React.Component {
  
  
      state = {
          num: 0,
      }
  
      handleIncrease = () =&gt; {
          console.log("hello increase")
          this.setState({
              num: this.state.num + 1,
          })
  
      }
  
      handleDecrease = () =&gt; {
          console.log("hello decrease")
          this.setState({
              num: this.state.num - 1,
          })
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;p&gt;{this.state.num}&lt;/p&gt;
                  &lt;button onClick={this.handleIncrease}&gt;+&lt;/button&gt;
                  &lt;button onClick={this.handleDecrease}&gt;-&lt;/button&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default Counter;
  </code></pre>