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

📖 Theory

ખાનામાંના લખાણનો માલિક કોણ?

FestConnect ને registration નું form જોઈએ છે: નામનું ખાનું, event નું dropdown, અને submit નું button. સાદા HTML માં input ના લખાણનો માલિક browser હોય છે, અને તમે માગો ત્યારે જ એ વાંચી શકો.

React એ જુદી રીતે કરે છે, અને એ ફરક જ આખો પાઠ છે. React માં input ની કિંમતનો માલિક component હોય છે: એ state માં રહે છે, input એને બતાવે છે, અને દરેક કળ દબાય એ સાથે state બદલાય છે. આને controlled component કહે છે, અને એથી form ના data માટે component જ સત્યનો એકમાત્ર સ્રોત બને છે. આ એક ઢબ પર કાબૂ મેળવો એટલે React નાં બધાં forms, એટલે કે inputs, textareas અને dropdowns, એ જ રીતે કામ કરે છે.

📖 Theory

Controlled component ની ઢબ

Controlled component input ની કિંમતને component ના STATE સાથે બાંધે છે:

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

એને એક ચક્ર તરીકે વાંચો:

• Input state ની કિંમત બતાવે છે (value={name})
• ટાઇપ કરવાથી onChange ચાલે છે, જે નવું લખાણ `e.target.value` માંથી વાંચે છે અને state બદલે છે (setName(...))
• State બદલાય એટલે input નવી કિંમત સાથે ફરી render થાય છે

એટલે વપરાશકારને જે દેખાય છે એની સાથે state હંમેશા મળતું રહે છે: એ જ સત્યનો એકમાત્ર સ્રોત છે. (setName એ useState માંથી આવે છે, અને એ hook પછીના પાઠમાં પૂરેપૂરું આવે છે; અહીં એ ફક્ત form ની કિંમત સાચવે છે.) Submit કે ચકાસણી માટે data જોઈએ ત્યારે તમે એને DOM માંથી નહીં, state માંથી વાંચો છો.

⌨️ 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, અને ઘણાં ખાનાં માટેની યુક્તિ

Submit કરવું: <form> પર onSubmit મૂકો અને સૌથી પહેલાં `e.preventDefault()` બોલાવો: એ submit વખતે page ફરી load કરવાના browser ના મૂળભૂત વર્તનને અટકાવે છે, જે તમારું React નું state ભૂંસી નાખત. preventDefault ભૂલી જવાને લીધે જ React નું form submit વખતે 'ઝબકીને બધું ગુમાવી દે છે'.

textarea અને select પણ inputs ની જેમ જ controlled હોય છે (value અને onChange), ભલે સાદું HTML એમને જુદી રીતે વર્તે (textarea અંદરનું લખાણ વાપરે છે, select selected નું લક્ષણ વાપરે છે): React એ બધાંને value અને onChange ની એક જ ઢબમાં લાવે છે.

e.target.name: એક જ handler ઘણાં ખાનાં સંભાળતું હોય ત્યારે e.target.name કહે છે કે કયું input બદલાયું (એનું name નું લક્ષણ), જેથી એક જ onChange state નો સાચો ટુકડો બદલી શકે.

React.memo component ને વીંટે છે જેથી એના props ન બદલાયા હોય ત્યારે એ ફરી render ન થાય: ભારે components માટે કામગીરી સુધારવાની આ રીત છે.

🧩 Quiz

React ના controlled input માં input ની ચાલુ કિંમત ખરેખર ક્યાં રહે છે, અને એને મળતી કોણ રાખે છે?

1. ફક્ત DOM માં; React ને જરૂર પડે ત્યારે એ વાંચે છે
2. Component ના STATE માં; input state ની કિંમત બતાવે છે અને દરેક કળ દબાય એ સાથે onChange state બદલે છે
3. બધાં components વચ્ચે વહેંચાયેલા global variable માં
4. ક્યાંય નહીં; React નાં forms કિંમતો રાખી શકતાં જ નથી

💭 Think first

જે form ફરી load થઈને બધું ગુમાવી બેઠું

એક વિદ્યાર્થીનું React વાળું registration form દર વખતે Submit પર click કરતાં બધાં ખાનાં ખાલી કરી નાખે છે અને page ઝબકે છે. કઈ એક લીટી ખૂટે છે, અને એથી આવું કેમ થાય છે? વિચારીને પછી tap કરો.

⚠️ Watch out

React ના form ના ફાંદા

e.preventDefault() ભૂલી જવું: submit વખતે page ફરી load થાય છે અને state ખોવાય છે.

અજાણતાં uncontrolled inputs: value કે onChange વગરનું input uncontrolled હોય છે; controlled વર્તન જોઈએ તો બંને જોડો.

State ને બદલે DOM વાંચવું: controlled components માં કિંમત state માંથી વાંચો, DOM ને પૂછીને નહીં.

textarea કે select ને HTML ની રીતે વાપરવાં: React માં એ value અને onChange વાપરે છે, અંદરનું લખાણ કે selected નું લક્ષણ નહીં.

State ને સીધું બદલવું: હંમેશા setter વાપરો (setName), state ના variable ને સીધી કિંમત કદી ન આપો.

📖 Theory

State દેખાયું; હવે એના પર કાબૂ મેળવો

Form ની કિંમતો રાખવા તમે useState વાપરતા આવ્યા છો, પણ state એ React નો સૌથી ઊંડો અને સૌથી અગત્યનો વિચાર છે, અને એની સાથે HOOKS નામનો ઓજારોનો આખો પરિવાર આવે છે. React નો છેલ્લો પાઠ એમને આવરી લે છે: useState (state), useEffect (આડઅસરો), useContext, useRef અને બીજાં, સાથે તમારાં પોતાનાં custom hooks બનાવવાં પણ. આધુનિક React નાં components state અને logic hooks થી જ સાચવે છે, અને એ FestConnect નું front-end પૂરું કરે છે. State એ ચાખવા પૂરતું હતું; hooks એ આખું ભોજન છે.

✅ Summary

Key takeaways

• React નાં forms controlled components વાપરે છે: input ની કિંમત state માં રહે છે, અને value={x} તથા onChange થી બંધાય છે.
• ઢબ: value={name} onChange={e => setName(e.target.value)}: state જ સત્યનો એકમાત્ર સ્રોત છે.
• લખાયેલી કિંમત e.target.value થી વાંચો; e.target.name કહે છે કે કયું ખાનું બદલાયું (એક જ વહેંચાયેલા handler માટે).
• Submit વખતે સૌથી પહેલાં e.preventDefault() બોલાવો જેથી browser page ફરી load ન કરે (જે state ભૂંસી નાખત).
• textarea અને select પણ એ જ રીતે controlled હોય છે (value અને onChange), સાદા HTML થી ઊલટું.
• React.memo component ના props ન બદલાયા હોય ત્યારે એને ફરી render થતું અટકાવે છે (કામગીરી સુધારવા).
• યાદ રાખવાની કડી: controlled input state નું પ્રતિબિંબ છે, onChange એને બદલે છે, અને submit પર preventDefault.