Page Comparison

...

Info

title	info

How do you update data in a parent component from a child component? Use a callback

Parent Component

Class Component

Function Component

Code Block

language	js
title	AppType

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>
    );
  }
}

Code Block

language	js
title	App

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>
  );
}

SimpleCounter Component

Code Block

language	js
title	SimpleCounter

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>
  );
}

...

Versions Compared

Old Version 4

New Version Current

Key

Parent Component