Form Handling

A form handling component using React's useState hook.

10 Stars

Code

const [name, setName] = useState('');

const handleSubmit = (e) => {
  e.preventDefault();
  alert(`Hello, ${name}!`);
};

return (
  <form onSubmit={handleSubmit}>
    <label htmlFor="name">Name:</label>
    <input
      type="text"
      id="name"
      value={name}
      onChange={(e) => setName(e.target.value)}
    />
    <button type="submit">Submit</button>
  </form>
);

Explanation

This code defines a form handling component using React's useState hook. It maintains a name state variable initialized to an empty string and provides a handleSubmit function to handle form submission. When the form is submitted, it prevents the default behavior, displays an alert with the submitted name, and clears the input field.