// src/App.jsx
import { useState } from "react";

function SimpleForm() {
  const [value, setValue] = useState("");

  function handleSubmit(event) {
    event.preventDefault();
    console.log(value);
    setValue("");
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={value}
        onChange={(event) => setValue(event.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

function App() {
  return <SimpleForm />;
}

export default App;

/*
  Notes:
  - event.preventDefault() is called first, before anything else, to
    stop the browser's default full-page reload on form submit.
  - Logging happens with the value still in state at submit time;
    setValue("") afterward clears the input by resetting state, since
    the input's value prop is tied directly to that state.
*/