import "./styles.css";
import React, { useState } from "react";

function CounterVarUpdates({ initialCount }) {
  const [count, setCount] = useState(initialCount);
  return (
    <div>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  );
}

function CounterFuncUpdates({ initialCount }) {
  const [count, setCount] = useState(initialCount);
  return (
    <div>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount((prevCount) => prevCount + 1)}>+</button>
      <button onClick={() => setCount((prevCount) => prevCount - 1)}>-</button>
    </div>
  );
}

export default function App() {
  return (
    <div className="App">
      <h1>React functional state updates</h1>
      <a href="https://stackoverflow.com/questions/57828368/why-react-usestate-with-functional-update-form-is-needed">
        Discussion at StackOverflow
      </a>
      <CounterVarUpdates initialCount={0} />
      <CounterFuncUpdates initialCount={100} />
    </div>
  );
}