#9 Mastering Event Handling in React | Complete React Course in Bangla

App.jsx

import { useState } from "react";
const App = () => {
  const [localValue, setLocalValue] = useState("");
  const [submittedValue, setSubmittedValue] = useState("");
  const handleChange = (event) => {
    setLocalValue(event.target.value);
  };

  const handleSubmitForm = (event) => {
    event.preventDefault();
    setSubmittedValue(localValue);
  };

  return (
    <div>
      <h1>Video No. 09 </h1>
      <form onSubmit={handleSubmitForm}>
        <input
          type="text"
          placeholder="input"
          value={localValue}
          onChange={handleChange}
        />
        <button type="submit">Submit</button>
      </form>

      <h1>Final Submitted Value: {submittedValue}</h1>
    </div>
  );
};

export default App;

index.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    padding-top: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
}

input {
    padding: 1rem 2rem;
    font-size: 1.5rem;
    background-color: white;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

button {
    padding: 1rem 2rem;
}