Lifting up the State (callbacks)

function SimpleCounter(props) {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  let updateParent = async function(){ 
    props.handleClick(); 
  }

  return (
    <div>
      <button onClick={() => {
          if( props.handleClick != null )
          {
            updateParent();
            //props.handleClick();
          }
          setCount(count + 1);
        }
      }>Click me
      </button>
      <p>Simple Counter says: {count} times</p>
    </div>
  );
}

import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

function SimpleCounter(props) {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  let updateParent = async function(){ 
    props.handleClick(); 
    //await sleep(1000);
  }

  return (
    <div>
      <button onClick={() => {
          if( props.handleClick != null )
          {
            updateParent();
            //props.handleClick();
          }
          setCount(count + 1);
        }
      }>Click me
      </button>
      <p>Simple Counter says: {count} times</p>
    </div>
  );
}

export class AppType extends React.Component 
{
  constructor(props) {
    super(props);
  
    this.state = {
      localClickCount: 0,
      sharedClickCount: 0
    }

    this.localClickHandler = () => {
      console.log( "L[" + this.state.localClickCount + "]" );
      this.setState( {localClickCount: this.state.localClickCount + 1} );
    }

    this.sharedClickHandler = () => {
      console.log( "S[" + this.state.clickCount + "]" );
      this.setState( {sharedClickCount: this.state.sharedClickCount + 1} );
    }
  }

  render(){
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />

          <p>
            Application says: {this.state.localClickCount}
          </p>
          <button onClick={() => {
                this.localClickHandler()
              }
            }>Click me
          </button>
          <p>React App says: {this.state.sharedClickCount}</p>
          <SimpleCounter handleClick={this.sharedClickHandler}/>
        </header>
      </div>
    );
  }
}


const App = () => 
{
  const [sharedClickCount, setSharedCount] = useState(0);
  const [localClickCount, setLocalCount] = useState(0);

  let sharedClickHandler = () => {
    console.log( "S[" + sharedClickCount + "]" );
    setSharedCount( sharedClickCount + 1 );
  }

  let localClickHandler = () => {
    console.log( "L[" + localClickCount + "]" );
    setLocalCount( localClickCount + 1 );
  }

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Application says: {localClickCount}
        </p>
        <button onClick={() => {
              localClickHandler()
            }
          }>Click me
        </button>
        <p>React App says: {sharedClickCount}</p>
        <SimpleCounter handleClick={sharedClickHandler}/>
      </header>
    </div>
  );
}

export default App;