Forms (adding, handling, submitting): event.target.name and event.target.event, React Memo; components (TextArea, Drop down list SELECT)

📖 Theory

Box में Text किसकी Own है?

FestConnect को एक registration FORM चाहिए: एक name field, एक event dropdown, एक submit button। Plain HTML में, browser input के text को own करता है, और आप इसे सिर्फ़ तब पढ़ते हैं जब आप पूछते हैं।

React इसे अलग तरीके से करता है, और यह फ़र्क़ पूरा lesson है। React में, COMPONENT input की value own करता है: यह state में रहती है, input इसे display करता है, और हर keystroke state update करता है। यह एक controlled component है, और यह component को form के data का single source of truth बनाता है। यह एक pattern master कीजिए और हर React form, inputs, textareas, dropdowns, same तरीके से काम करता है।

📖 Theory

Controlled Component Pattern

एक controlled component एक input की value को component STATE से tie करता है:

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

इसे एक loop की तरह पढ़िए:

• input state value DISPLAY करता है (value={name})
• typing onChange fire करती है, जो `e.target.value` से नया text पढ़ता है और state update करता है (setName(...))
• state change नई value के साथ input को re-render करता है

तो state ALWAYS user जो देखता है उसके साथ sync में है: यह single source of truth है। (setName useState से आता है, एक hook जो अगले lesson में fully cover होता है; यहाँ यह बस form value hold करता है।) जब आपको data चाहिए, submit या validation के लिए, आप इसे state से पढ़ते हैं, DOM से नहीं।

⌨️ Practical

एक Controlled Registration Form

function RegisterForm() {
  const [name, setName] = React.useState("");
  const [event, setEvent] = React.useState("Garba Night");

  function handleSubmit(e) {
    e.preventDefault();          // stop the browser's page reload
    alert(name + " registered for " + event);
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* controlled input: value from state, onChange updates state */}
      <input value={name} onChange={e => setName(e.target.value)} />

      {/* select (dropdown) is controlled the same way */}
      <select value={event} onChange={e => setEvent(e.target.value)}>
        <option>Garba Night</option>
        <option>Coding Contest</option>
      </select>

      <button type="submit">Register</button>
    </form>
  );
}

This example runs in Gri-Learn on the web, where you can edit it and see the output.

📖 Theory

Submit, और Multi-Field Trick

Submitting: <form> पर onSubmit डालिए और पहले `e.preventDefault()` call कीजिए: यह browser के submit पर page reload करने के default behaviour को STOP करता है, जो आपका React state wipe कर देता। preventDefault भूलना वह वजह है जो एक React form submit पर 'flash होता है और सब कुछ खो देता है'।

textarea और select exactly inputs की तरह controlled होते हैं (value + onChange), भले ही plain HTML इन्हें अलग treat करता है (textarea inner text इस्तेमाल करता है, select एक selected attribute इस्तेमाल करता है): React इन सबको value/onChange pattern के under unify करता है।

e.target.name: जब एक handler MANY fields manage करता है, e.target.name आपको बताता है कौन सा input बदला (इसका name attribute), तो एक single onChange state के सही piece को update कर सकता है।

React.memo एक component को wrap करता है इसे re-render करना SKIP करने के लिए जब इसकी props नहीं बदली हों: expensive components के लिए एक performance optimization।

🧩 Quiz

एक React controlled input में, input की current value actually कहाँ रहती है, और इसे sync में क्या रखता है?

1. सिर्फ़ DOM में; React इसे ज़रूरत पड़ने पर पढ़ता है
2. Component STATE में; input state value दिखाता है और onChange हर keystroke पर state update करता है
3. सारे components के shared एक global variable में
4. कहीं नहीं; React forms values hold नहीं कर सकते

💭 Think first

वह Form जो Reload हुआ और सब कुछ खो दिया

एक student का React registration form हर बार Submit click करने पर सारी fields clear कर देता है और page flicker करता है। कौन सी single line missing है, और यह इसे क्यों cause करती है? फिर tap कीजिए।

⚠️ Watch out

React Form Traps

e.preventDefault() भूलना: submit पर page reload होता है और state lost हो जाता है।

Accidentally Uncontrolled Inputs: बिना value/onChange वाला एक input uncontrolled है; controlled behaviour के लिए, दोनों wire कीजिए।

State की बजाय DOM पढ़ना: controlled components में, value state से पढ़िए, DOM query करके नहीं।

textarea/select को HTML तरीके से: React में ये value + onChange इस्तेमाल करते हैं, inner text या selected attribute नहीं।

State Directly Mutate करना: हमेशा setter इस्तेमाल कीजिए (setName), कभी state variable को assign मत कीजिए।

📖 Theory

State आ गया; अब इसे Master कीजिए

आप form values hold करने के लिए useState इस्तेमाल कर रहे हैं, पर state React का सबसे deep और सबसे important idea है, और यह HOOKS नाम के tools की एक पूरी family के साथ आता है। Final React lesson इन्हें cover करता है: useState (state), useEffect (side effects), useContext, useRef, और ज़्यादा, plus अपने खुद के custom hooks बनाना। Hooks वह तरीका है जिससे modern React components state और logic hold करते हैं, और ये FestConnect का front-end complete करते हैं। State एक taste था; hooks meal हैं।

✅ Summary

Key takeaways

• React forms controlled components इस्तेमाल करते हैं: input की value state में रहती है, value={x} और onChange से tied।
• Pattern: value={name} onChange={e => setName(e.target.value)}: state single source of truth है।
• Typed value e.target.value से पढ़िए; e.target.name identify करता है कौन सी field बदली (एक shared handler के लिए)।
• Submit पर, पहले e.preventDefault() call कीजिए browser को page reload करने से रोकने के लिए (जो state wipe कर देता)।
• textarea और select same तरीके से controlled होते हैं (value + onChange), plain HTML के उलट।
• React.memo एक component को re-render करना skip करता है जब इसकी props नहीं बदली हों (optimization)।
• Memory hook: controlled input state को mirror करता है, onChange इसे update करता है, submit पर preventDefault।