React Events & Forms - Interactive Learning

1. Synthetic Events

Synthetic Events kya hain? React apne khud ke event system use karta hai jo browser ke native events ko wrap karta hai. Isko SyntheticEvent kehte hain.

Kyun use karte hain? Cross-browser compatibility ke liye. Sabhi browsers mein same behavior milta hai.

Interactive Demo: Event Properties

// Synthetic Event Example
function handleClick(e) {
    e.preventDefault(); // Works across all browsers
    console.log(e.type); // 'click'
    console.log(e.target); // Button element
    console.log(e.currentTarget); // Current element
}

Important Properties

Property	Description
`e.target`	Jis element pe click hua woh (actual element)
`e.currentTarget`	Jis element pe event listener laga hai woh
`e.preventDefault()`	Default behavior ko rok deta hai
`e.stopPropagation()`	Event bubbling ko rok deta hai

2. Event Binding

Event Binding matlab event handlers ko component ke saath connect karna. React mein events ko camelCase mein likhte hain jaise onClick, onChange, etc.

Interactive Demo: Different Binding Methods

// Method 1: Inline Arrow Function
<button onClick={(e) => handleClick(e)}>Click</button>

// Method 2: Arrow Function Property
handleClick = (e) => {
    console.log(this); // 'this' automatically bound
}

// Method 3: Bind in Constructor
constructor() {
    this.handleClick = this.handleClick.bind(this);
}

3. Controlled vs Uncontrolled Components

Aspect	Controlled Components	Uncontrolled Components
Data Source	React state se control hota hai	DOM khud manage karta hai
Value Access	State se directly milta hai	Ref use karke DOM se lena padta hai
Validation	Real-time validation easy hai	Submit time pe hi validate kar sakte hain
Usage	Most cases mein recommended	Simple forms ya file inputs ke liye

Controlled Component Demo

Live Example: Controlled Input

Current Value: ""
Character Count: 0

// Controlled Component
const [value, setValue] = useState('');

<input 
    value={value}
    onChange={(e) => setValue(e.target.value)}
/>

Uncontrolled Component Demo

Live Example: Uncontrolled Input

// Uncontrolled Component
const inputRef = useRef(null);

<input ref={inputRef} />

// Get value when needed
const value = inputRef.current.value;

4. Form Validation Patterns

Form Validation zaroori hai taaki user correct data enter kare. Validation teen types ka hota hai:

Client-side validation: Browser mein hi check karo
Real-time validation: Har keystroke pe validate karo
Submit-time validation: Form submit hone pe check karo

Interactive Form with Validation

// Validation Function Example
const validateForm = (values) => {
    const errors = {};
    
    if (!values.name || values.name.length < 3) {
        errors.name = 'Name must be at least 3 characters';
    }
    
    if (!values.email || !/\S+@\S+\.\S+/.test(values.email)) {
        errors.email = 'Valid email required';
    }
    
    return errors;
}

5. Input Management for Large Forms

Large forms manage karna challenging ho sakta hai. Har input ke liye alag state banana efficient nahi hai. Solution: Ek single object mein saare values rakhna.

Large Form Example

// Single Object State Pattern
const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    phone: ''
});

// Generic onChange Handler
const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
        ...prev,
        [name]: value
    }));
};

6. Handling Checkboxes, Radios & Selects

Checkboxes

Multiple Selection with Checkboxes

React Vue Angular Node.js

Selected Skills: None

// Checkbox Handler
const [skills, setSkills] = useState([]);

const handleCheckbox = (e) => {
    const { value, checked } = e.target;
    if (checked) {
        setSkills([...skills, value]);
    } else {
        setSkills(skills.filter(s => s !== value));
    }
};

Radio Buttons

Single Selection with Radio Buttons

Beginner Intermediate Advanced

Selected Level: None

Select Dropdown

Dropdown Selection

Selected Country: None

// Radio Handler
const [level, setLevel] = useState('');
<input 
    type="radio" 
    checked={level === 'beginner'}
    onChange={(e) => setLevel(e.target.value)}
/>

// Select Handler
const [country, setCountry] = useState('');
<select value={country} onChange={(e) => setCountry(e.target.value)}>
    <option value="india">India</option>
</select>

7. Reusable Input Components

Reusable components banane se code DRY (Don't Repeat Yourself) rehta hai. Ek baar component banao aur kahin bhi use karo!

Custom Input Component Demo

Username

Password

// Reusable Input Component
function CustomInput({ label, type, value, onChange, error }) {
    return (
        <div className="form-group">
            <label>{label}</label>
            <input 
                type={type}
                value={value}
                onChange={onChange}
            />
            {error && <div className="error">{error}</div>}
        </div>
    );
}

// Usage
<CustomInput 
    label="Username"
    type="text"
    value={username}
    onChange={(e) => setUsername(e.target.value)}
    error={errors.username}
/>

8. Formik + Yup Introduction

Formik ek popular library hai jo forms ko manage karne mein madad karti hai. Yeh boilerplate code ko kam kar deti hai.

Yup ek schema validation library hai jo Formik ke saath bahut achhe se kaam karti hai.

Why Use Formik?

✅ Form state management automatic
✅ Validation ko simple bana deta hai
✅ Error handling built-in hai
✅ Less code likhna padta hai
✅ Form submission ko handle karna easy hai

// Without Formik (More Code)
const [values, setValues] = useState({});
const [errors, setErrors] = useState({});
const [touched, setTouched] = useState({});

const handleChange = (e) => { /* ... */ };
const handleBlur = (e) => { /* ... */ };
const handleSubmit = (e) => { /* ... */ };
const validate = () => { /* ... */ };

// With Formik (Less Code)
import { useFormik } from 'formik';
import * as Yup from 'yup';

const formik = useFormik({
    initialValues: { email: '', password: '' },
    validationSchema: Yup.object({
        email: Yup.string()
            .email('Invalid email')
            .required('Required'),
        password: Yup.string()
            .min(6, 'Must be 6 characters')
            .required('Required')
    }),
    onSubmit: values => {
        console.log(values);
    }
});

Yup Validation Schema

// Common Yup Validations
const schema = Yup.object({
    // String validations
    name: Yup.string()
        .required('Name required hai')
        .min(3, 'Minimum 3 characters chahiye')
        .max(50, 'Maximum 50 characters tak'),
    
    // Email validation
    email: Yup.string()
        .email('Valid email daalo')
        .required('Email required hai'),
    
    // Number validation
    age: Yup.number()
        .positive('Positive number hona chahiye')
        .integer('Integer hona chahiye')
        .min(18, '18 se kam nahi')
        .required('Age required hai'),
    
    // Array validation
    skills: Yup.array()
        .min(1, 'Kam se kam 1 skill select karo')
        .required('Skills required hain'),
    
    // Custom validation
    password: Yup.string()
        .matches(/[0-9]/, 'Password mein number hona chahiye')
        .required('Password required hai')
});

Formik-Style Form Demo

🎯 Interview Questions

Q1: What are Synthetic Events in React? Why are they used? Easy

Answer: Synthetic Events React ke cross-browser wrapper hain native browser events ke around. React apna khud ka event system use karta hai jo consistent behavior provide karta hai sabhi browsers mein.

Key Points:

Cross-browser compatibility ensure karta hai
Event pooling ke through performance optimize karta hai
Same API milta hai har browser mein
Native event ko wrap karke consistent interface deta hai

Q2: Controlled vs Uncontrolled Components mein kya difference hai? Medium

Answer:

Controlled Components:

React state input ki value ko control karta hai
Har change pe state update hota hai
Real-time validation easy hai
Example: <input value={state} onChange={handler} />

Uncontrolled Components:

DOM khud data manage karta hai
Ref use karke value access karte hain
Simple forms ke liye suitable
Example: <input ref={inputRef} />

Q3: How do you handle multiple inputs in a single onChange handler? Medium

Answer: Ek single object state use karte hain aur computed property name use karke dynamic key update karte hain:


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


const handleChange = (e) => {

  const {name, value} = e.target;

  setFormData(prev => ({...prev, [name]: value}));

};


<input name="name" onChange={handleChange} />

<input name="email" onChange={handleChange} />

Benefits: Less code, scalable, aur easy to maintain.

Q4: What is event bubbling and how do you stop it in React? Medium

Answer: Event bubbling ek mechanism hai jismein events child element se parent element tak propagate hote hain. Jab aap child pe click karte ho, pehle child ka handler chalega, phir parent ka.

Stop karne ke tarike:

e.stopPropagation() - Event ko parent tak jane se rokta hai
e.preventDefault() - Default browser behavior rokta hai


const handleClick = (e) => {

  e.stopPropagation(); // Parent handler nahi chalega

  console.log('Only child handler runs');

};

Q5: Why is Formik used and what problems does it solve? Easy

Answer: Formik ek React form library hai jo form management ko simple banati hai.

Problems it solves:

State Management: Form values, errors, touched fields automatically manage karta hai
Validation: Built-in validation support with Yup integration
Boilerplate: Repetitive code ko reduce karta hai
Submission: Form submission ko handle karna easy ho jata hai
Error Handling: Error display aur management built-in hai

Without Formik: 50-60 lines code
With Formik: 15-20 lines code

Q6: How do you validate forms in React? Explain different approaches. Hard

Answer: React mein form validation ke multiple approaches hain:

1. Manual Validation:

Custom validation functions likhna
onChange ya onSubmit pe validate karna
Full control milta hai but boilerplate code zyada

2. HTML5 Validation:

Built-in attributes: required, pattern, min, max
Quick implementation but limited customization

3. Schema-based Validation (Yup):

Declarative validation rules
Reusable schemas
Complex validations easily possible

4. Real-time vs Submit-time:

Real-time: Har keystroke pe validate (better UX)
Submit-time: Form submit pe validate (better performance)
On Blur: Field leave karne pe validate (balanced approach)

Best Practice: Formik + Yup combination sabse popular hai kyunki yeh clean, maintainable aur powerful hai.

Q7: What are the best practices for handling large forms with many inputs? Hard

Answer: Large forms ke liye efficient strategies:

1. Single State Object:

Saare form values ek object mein store karo
Generic onChange handler use karo with computed property names

2. Form Breakdown:

Large form ko smaller sections mein divide karo
Multi-step forms banao with progress indicator
Lazy loading for better initial load time

3. Reusable Components:

Custom input components banao (FormInput, FormSelect, etc.)
Validation logic ko centralize karo

4. Performance Optimization:

Debouncing for expensive validations
React.memo() for input components
useCallback for event handlers
Field-level validation instead of form-level

5. State Management:

Complex forms ke liye Context API ya Redux use karo
Form state ko global banana for persistence

6. Libraries:

Formik ya React Hook Form for complex scenarios
Yup for schema validation

🎉 Congratulations!

Aapne React Events aur Forms ki complete understanding gain kar li hai!

Practice karte raho aur real projects mein implement karo! 🚀