Form Handling Example

This example demonstrates form handling with controlled components.

jsxCopy codeimport React, { useState } from 'react';
import ReactDOM from 'react-dom';

function FormExample() {
  const [formData, setFormData] = useState({ name: '', email: '' });

  const handleChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (e) => {
e.preventDefault();
alert(Name: ${formData.name}, Email: ${formData.email});
  };

  return (
<form onSubmit={handleSubmit}>
  <h1>Contact Form</h1>
  <input
    type="text"
    name="name"
    placeholder="Name"
    value={formData.name}
    onChange={handleChange}
  />
  <input
    type="email"
    name="email"
    placeholder="Email"
    value={formData.email}
    onChange={handleChange}
  />
  <button type="submit">Submit</button>
</form>
  );
}

ReactDOM.render(<FormExample />, document.getElementById('root'));