React Counter Component

Counter button using useState hook

import { useState } from 'react';



const CounterButton = () => {

  const [count, setCount] = useState(0);



  function handleClick() {

    setCount(count + 1);

  }



  return (

    <button onClick={handleClick}>

      Clicked {count} times

    </button>

  );

}



const MyApp = () => {

  return (

    <div>

      <h1>Counters that update separately</h1>

      <CounterButton />

      <CounterButton />

    </div>

  );

}

Counter button with sharing state (moving state to the parent component)

import { useState } from 'react';



const CounterButtonSharedState = (props: { count: number; onClick: () => void }) => {

    return (

      <button onClick={props.onClick}>

        Clicked {props.count} times (connected)

      </button>

    );

};



const MyApp = () => {

  const [count, setCount] = useState(0);



  function handleCounterClick() {

    setCount(count + 1);

  }



  return (

    <div>

      <h1>Counters that update together</h1>

      <CounterButtonSharedState count={count} onClick={handleCounterClick} />

      <CounterButtonSharedState count={count} onClick={handleCounterClick} />

    </div>

  );

}