Class components: React class and class components; conditional statements, operators, lists; React Events (adding events, passing arguments, event objects)

📖 Theory

કશું ન કરતું UI એ UI જ નથી

ગયા પાઠનાં FestConnect નાં components events બતાવે તો છે, પણ નિષ્ક્રિય બેસી રહે છે. ખરું આંતરમુખ પ્રતિભાવ આપે છે: card પર click કરીને એને પસંદ કરવું, બેઠકો શૂન્ય થાય ત્યારે 'Sold out' જોવું, અને આખી યાદી array માંથી render કરવી.

આ પાઠ components ને પ્રતિભાવ આપતાં કરે છે: events (clicks સંભાળવા), lists (events ના array ને render કરવો), અને conditional rendering (યોગ્ય હોય ત્યારે જ 'Sold out' બતાવવું). એ React ની class-component વાળી શૈલી વાપરે છે, જેને તમારો અભ્યાસક્રમ આધુનિક function અને hooks વાળી શૈલી સાથે શીખવે છે (એ પછી આવે છે). ખયાલો, એટલે કે events, lists અને conditionals, બંને શૈલીમાં એકસરખા જ છે.

📖 Theory

Events સંભાળવાં

React વપરાશકારની ક્રિયાઓ camelCase વાળા event handlers થી સંભાળે છે, જે એક function લે છે:

<button onClick={handleClick}>Register</button>

onClick={handleClick} ધ્યાનથી જુઓ: તમે function નું નામ (સંદર્ભ) મોકલો છો, handleClick() નહીં (જે render વખતે જ એને બોલાવી નાખત). Argument મોકલવો હોય તો એને arrow function માં વીંટો:

<button onClick={() => handleClick(eventId)}>Register</button>

Handler ને event object મળે છે (રિવાજ પ્રમાણે e), જે e.target જેવી વિગતો લઈને આવે છે. આ BCA405-01 ના DOM વાળો એ જ event નો વિચાર છે, પણ React ની syntax માં વીંટાયેલો. તરત બોલાવી નાખવાની ભૂલ (onClick={handleClick(id)}) React ના events ની સૌથી સામાન્ય ભૂલ છે.

⌨️ Practical

Keys વાળી list, events અને conditional rendering

function EventList() {
  const events = [
    { id: 1, name: "Garba Night", seats: 350 },
    { id: 2, name: "Coding Contest", seats: 0 },
  ];

  function handleClick(name) {
    alert("Selected: " + name);
  }

  return (
    <ul>
      {events.map((ev) => (
        <li key={ev.id}>                        {/* each item needs a KEY */}
          {ev.name} -
          {/* conditional rendering with a ternary */}
          {ev.seats > 0
            ? <span> {ev.seats} seats</span>
            : <span> Sold out</span>}
          {/* arrow wrapper to pass an argument */}
          <button onClick={() => handleClick(ev.name)}>Select</button>
        </li>
      ))}
    </ul>
  );
}

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

📖 Theory

Lists અને conditional rendering

Lists: array ને .map() બોલાવીને render કરો, અને દરેક item માટે JSX પાછું આપો. Render થતી દરેક item ને અનન્ય `key` નું prop જોઈએ (key={ev.id}): React કઈ items બદલાઈ તે નજર રાખવા keys વાપરે છે, જેથી એ કાર્યક્ષમ રીતે બદલી શકે. Key ખૂટે તો ચેતવણી આવે છે અને ઝીણી ભૂલો પણ થઈ શકે છે; બની શકે ત્યાં array ના ક્રમાંકને બદલે સ્થિર અનન્ય id વાપરો.

Conditional rendering: શરત પ્રમાણે સામગ્રી બતાવો, અને એ માટે વાપરો:

• Ternary: condition ? <A/> : <B/> (A કે B બતાવે)
• તાર્કિક AND: condition && <A/> (શરત સાચી હોય તો જ A બતાવે)

એટલે ev.seats > 0 ? <span>{ev.seats} seats</span> : <span>Sold out</span> બેઠકોની સંખ્યા કે 'Sold out' બતાવે છે. આ સામાન્ય JavaScript ના operators જ છે, જે JSX ના {} ની અંદર વપરાય છે.

🧩 Quiz

Handler ને id મોકલવા તમે <button onClick={handleClick(id)}>Go</button> લખો છો. ખરેખર શું થાય છે?

1. Button પર click થાય ત્યારે એ બરાબર handleClick(id) બોલાવે છે
2. Component render થાય ત્યારે જ handleClick(id) તરત બોલાવાય છે, click પર નહીં; તમારે arrow વાળું આવરણ જોઈએ: onClick={() => handleClick(id)}
3. એ syntax ની ભૂલ ફેંકે છે
4. id અવગણાય છે

💭 Think first

યાદીની દરેક item ને key કેમ જોઈએ?

તમે key ના prop વગર યાદીને JSX માં map કરો તો React ચેતવણી આપે છે. Key શું કરે છે, અને એ કામગીરી તથા સાચાપણા માટે કેમ અગત્યની છે? વિચારીને પછી tap કરો.

⚠️ Watch out

Events, lists અને conditionals ના ફાંદા

તરત બોલાવાતું handler: onClick={fn(arg)} અત્યારે જ ચાલે છે; onClick={() => fn(arg)} વાપરો.

Map કરેલી items પર key ખૂટવી: એથી ચેતવણી અને ફેરફારની ભૂલો થાય છે; સ્થિર અનન્ય id વાપરો.

Items નો ક્રમ બદલાતો હોય ત્યારે array નો ક્રમાંક key તરીકે વાપરવો: ક્રમાંક ખસી જાય છે; ખરી id જ પસંદ કરો.

= અને => ગૂંચવવાં: handlers એક function મોકલે છે, જે ઘણી વાર arrow હોય છે.

JSX માં JavaScript ફરતે {} ભૂલી જવાં: conditionals અને map છગડિયા કૌંસની અંદર જ જાય છે.

📖 Theory

એ પ્રતિભાવ આપે છે; હવે input ઝીલો

FestConnect ની યાદી હવે clicks નો પ્રતિભાવ આપે છે, keys સાથે array માંથી render થાય છે, અને શરત પ્રમાણે 'Sold out' બતાવે છે. પછીની મોટી આપલે એટલે input: એટલે કે એવાં forms જ્યાં વપરાશકારો પોતાની registration ની વિગતો લખે છે. React forms ને ચોક્કસ રીતે સંભાળે છે, જેને controlled components કહે છે, જ્યાં form નો data component માં રહે છે અને દરેક કળ દબાય એ સાથે એ બદલાય છે. Forms, controlled inputs અને select તથા textarea હવે પછી આવે છે, અને પછી hooks આધુનિક React નું ચિત્ર પૂરું કરે છે.

✅ Summary

Key takeaways

• React નાં components વપરાશકારને પ્રતિભાવ આપે છે; class components (render() સાથે React.Component ને extend કરતાં) જૂની શૈલી છે, અને એની સાથે function components તથા hooks પણ છે.
• Events camelCase વાળા handlers વાપરે છે જે function લે છે: onClick={handleClick}; handler ને event object (e) મળે છે.
• Argument મોકલવા arrow વાળું આવરણ વાપરો: onClick={() => handleClick(id)}; onClick={handleClick(id)} એને તરત બોલાવી નાખે છે (ભૂલ).
• યાદીઓ .map() થી render કરો જે item દીઠ JSX પાછું આપે; દરેકને અનન્ય key નું prop જોઈએ (સ્થિર id વાપરો, ક્રમાંક નહીં).
• Keys items ને ઓળખ આપે છે જેથી React કાર્યક્ષમ અને સાચી રીતે ફેરફાર કરે.
• Conditional rendering: ternary (cond ? <A/> : <B/>) કે તાર્કિક AND (cond && <A/>).
• યાદ રાખવાની કડી: arguments માટે arrow વાળું આવરણ, યાદીની દરેક item ને key, અને શરતો માટે ternary કે &&.