hookstore-snippet 2

hookstore-snippet-local-useState.jsx

function StatefulHello() {
  const [timesClicked, updateTimesClicked] = useState(0);

  return (
    <div>
      <h1>Hello, component!</h1>
      <h2>The button inside this component was clicked {timesClicked} times</h2>
      <button type="button" onClick={() => updateTimesClicked(timesClicked + 1)}>
        Update
      </button>
    </div>
  );
}

function AnotherComponent() {
  /* this would not be the same state from StatefulHello
  const [ timesClicked, updateTimesClicked] = useState() */
  return (
    <div>
      <h1>
        Hello, this is a second component, with no relation to the one on the
        top
      </h1>
      <h2>
        And there is no way for it to keep track of how many times the user clicked on the button.
      </h2>
    </div>
  );
}