Learn React
Describing the UI

શરતી રેન્ડરિંગ

તમારા કમ્પોનેન્ટસને ઘણીવાર વિવિધ શરતો અનુસાર અલગ-અલગ વસ્તુઓ દર્શાવવાની જરૂર પડશે. React માં, તમે જાવાસ્ક્રિપ્ટ ની if સ્ટેટમેન્ટ્સ, &&, અને ? : ઓપરેટર્સનો ઉપયોગ કરીને શરતી રીતે JSX રેન્ડર કરી શકો છો.

You will learn

  • શરત પર આધાર રાખી અલગ JSX કેવી રીતે રીટર્ન કરવો.
  • JSX ના ભાગને શરતી રીતે કેવી રીતે ઉમેરવો અથવા કાઢી નાખવો.
  • React કોડબેઝમાં તમને મળતી સામાન્ય શરત આધારિત સિન્ટેક્સ શોર્ટકટ્સ.

શરતી રીતે JSX રીટર્ન કરવું

માનો કે તમારી પાસે PackingListનામનું કમ્પોનેન્ટ છે, જે કેટલીક Items રેન્ડર કરે છે, જેમને packed તરીકે અથવા not packed તરીકે ચિહ્નિત કરી શકાય છે:

function Item({ name, isPacked }) {
  return <li className="item">{name}</li>;
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

ધ્યાન આપો કે કેટલીક Item કમ્પોનેન્ટસમાં isPacked prop true તરીકે સેટ છે, જ્યારે કેટલીકમાં false છે. જો isPacked={true} હોય, તો packed કરેલા આઇટમ્સ માટે તમે ચેકમાર્ક (✅) કરી શકો છો.

તમે આને if/else સ્ટેટમેન્ટ તરીકે આ રીતે લખી શકો છો:

if (isPacked) {
  return <li className="item">{name} ✅</li>;
}
return <li className="item">{name}</li>;

જો isPacked prop true છે, તો આ કોડ અલગ JSX tree રીટર્ન કરે છે. આ બદલાવના કારણે, કેટલીક આઇટમ્સના અંતે ચેકમાર્ક(✅) જોવા મળશે.

function Item({ name, isPacked }) {
  if (isPacked) {
    return <li className="item">{name} ✅</li>;
  }
  return <li className="item">{name}</li>;
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

પ્રત્યેક કિસ્સામાં શું રીટર્ન થાય છે તે એડિટ કરવાનો પ્રયત્ન કરો, અને પરિણામ કેવી રીતે બદલાય છે તે જુઓ!

નોધો કે તમે જાવાસ્ક્રિપ્ટ ના if અને return સ્ટેટમેન્ટ્સ સાથે શાખાવાળા લોજિક બનાવો છો. React માં, કંટ્રોલ ફ્લો (જેમ કે શરતો) જાવાસ્ક્રિપ્ટ દ્વારા સંચાલિત થાય છે.

શરતી રીતે null સાથે કશું જ રીટર્ન ન કરવું.

કેટલીક પરિસ્થિતિઓમાં, તમે કશું પણ રેન્ડર કરવા માંગતા નથી. ઉદાહરણ તરીકે, માનો કે તમે packed કરેલ આઇટમ્સ દર્શાવવા માંગતા નથી. એક કમ્પોનેન્ટને કંઈક રીટર્ન કરવું જરૂરી છે. આ કિસ્સામાં, તમે null રીટર્ન કરી શકો છો:

if (isPacked) {
  return null;
}
return <li className="item">{name}</li>;

જો isPacked સાચું છે, તો કમ્પોનેન્ટ કશું પણ રીટર્ન નહીં કરે, એટલે કે null. અન્યથા, તે JSX રેન્ડર કરવા માટે રીટર્ન કરશે.

function Item({ name, isPacked }) {
  if (isPacked) {
    return null;
  }
  return <li className="item">{name}</li>;
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

વ્યવહારમાં, એક કમ્પોનેન્ટમાંથી null રીટર્ન કરવું સામાન્ય નથી કારણ કે તે તેને રેન્ડર કરવાનો પ્રયાસ કરનાર ડેવલપરને આશ્ચર્યમાં મૂકશે. વધારે પડતીવાર, તમે પેરેન્ટ કમ્પોનેન્ટના JSXમાં કમ્પોનેન્ટને શરતસર શામેલ કરવા કે બહાર કરવા પસંદ કરશો. તે કેવી રીતે કરવું તે અહીં છે!

શરતી રીતે JSX સમાવિષ્ટ કરવું

પહેલાના ઉદાહરણમાં, તમે નિયંત્રિત કર્યું હતું કે કયું (અથવા કંઈ નહીં!) JSX tree કમ્પોનેન્ટ દ્વારા રીટર્ન થશે. તમે કદાચ રેન્ડર આઉટપુટમાં થોડી પુનરાવર્તન જોઈ હશે.

<li className="item">{name} ✅</li>

આ ખૂબ સમાન છે

<li className="item">{name}</li>

બન્ને શરતી શાખાઓ <li className="item">...</li> રીટર્ન કરે છે.

if (isPacked) {
  return <li className="item">{name} ✅</li>;
}
return <li className="item">{name}</li>;

જોકે આ પુનરાવૃત્તિ નુકસાનકારક નથી, તે તમારા કોડને જાળવવા માટે મુશ્કેલ બનાવી શકે છે. જો તમારે className બદલવું પડે, તો તમારે તમારા કોડની બે અલગ અલગ જગ્યાએ આ ફેરફાર કરવો પડશે! આવી પરિસ્થિતિમાં, તમે તમારા કોડને વધુ DRY બનાવવા માટે શરતી રીતે થોડું JSX સામેલ કરી શકો છો.

શરતી (ટર્નરી) ઓપરેટર (? :)

જાવાસ્ક્રિપ્ટ માં શરતી એક્સપ્રેશન લખવા માટે સંક્ષિપ્ત સિનટેક્સ છે - શરતી ઓપરેટર અથવા “ટર્નરી ઓપરેટર”.

આના બદલે:

if (isPacked) {
  return <li className="item">{name} ✅</li>;
}
return <li className="item">{name}</li>;

તમે આ લખી શકો છો:

return (
  <li className="item">
    {isPacked ? name + ' ✅' : name}
  </li>
);

તમે આ રીતે વાંચી શકો છો: “જો isPacked સાચું છે, તો (?) name + ' ✅' રેન્ડર કરો, અન્યથા (:) name રેન્ડર કરો”.

Deep Dive

શું આ બે ઉદાહરણ સંપૂર્ણ રીતે સમાન છે?

જો તમે ઓબ્જેક્ટ-ઓરિએન્ટેડ પ્રોગ્રામિંગ પૃષ્ઠભૂમિમાંથી આવી રહ્યા છો, તો તમે માની શકો છો કે ઉપરના બંને ઉદાહરણો થોડા અલગ છે , કારણ કે એક <li> ના બે અલગ-અલગ “instances” બનાવે છે. પણ JSX એલીમેન્ટ્સ “instances” નથી, કારણ કે તે કોઈ આંતરિક state ધરાવતા નથી અને એ સાચા DOM નોડ્સ નથી. તે લાઇટવેઇટ વર્ણનાઓ છે, જેમ કે બ્લૂપ્રિન્ટ. તેથી આ બે ઉદાહરણો વાસ્તવમાં સંપૂર્ણ રીતે સમાન છે. સ્ટેટ જાળવવું અને ફરીથી સેટ કરવું એ કેવી રીતે કામ કરે છે તેની વિગતવાર માહિતી આપવામાં આવી છે.

હવે માનો કે તમે પૂર્ણ થયેલા આઇટમના ટેક્સ્ટને બીજાં HTML ટૅગ, જેમ કે <del>,માં વીંટવા માંગો છો જેથી તે સ્ટ્રાઇક થતું દેખાય. દરેક કિસ્સામાં વધુ JSXને સારી રીતે ગૂંથવા માટે તમે newline અને parentheses ઉમેરી શકો છો.

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {isPacked ? (
        <del>
          {name + ' ✅'}
        </del>
      ) : (
        name
      )}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

આ શૈલી સરળ શરતો માટે સારી રીતે કામ કરે છે, પરંતુ તેને મર્યાદિત પ્રમાણમાં જ ઉપયોગ કરો. જો તમારા કમ્પોનેન્ટમાં ખૂબ Nested શરતી માર્કઅપને કારણે ગૂંચવણ થાય, તો વસ્તુઓને સ્પષ્ટ કરવા માટે ચાઈલ્ડ કમ્પોનેન્ટને અલગ કાઢવાનું વિચારવું જોઈએ. Reactમાં, માર્કઅપ તમારા કોડનો જ ભાગ હોય છે, તેથી તમે કૉમ્પ્લેક્સ એક્સપ્રેશન્‍સ ને સરળ બનાવવા માટે વેરીએબલ્સ અને ફંક્શન્સ જેવા ટૂલ્સનો ઉપયોગ કરી શકો છો.

લોજિકલ AND ઑપરેટર (&&)

React કમ્પોનેન્ટસમાં તમે સામાન્ય રીતે જાવાસ્ક્રિપ્ટ લોજિકલ AND (&&) ઓપરેટર નો ઉપયોગ કરશો.આનો ઉપયોગ ત્યારે થાય છે જ્યારે તમારી શરત સાચી હોય ત્યારે કેટલીક JSX રેન્ડર કરવા માંગતા હો, અથવા અન્યથા કશું જ રેન્ડર ન કરો. && ની મદદથી, તમે isPacked true હોય ત્યારે જ ચેકમાર્ક શરતી રીતે રેન્ડર કરી શકો:

return (
  <li className="item">
    {name} {isPacked && '✅'}
  </li>
);

તમે આને આ રીતે વાંચી શકો છો “જો isPacked હોય, તો (&&) ચેકમાર્ક રેન્ડર કરો, અન્યથા કશું જ રેન્ડર ન કરો”.

આ છે તેનું કાર્યરત ઉદાહરણ:

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✅'}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

એક જાવાસ્ક્રિપ્ટ && એક્સપ્રેશન્‍સ એ તેના જમણા ભાગની કિંમત પરત કરે છે (આપના કેસમાં, ચેકમાર્ક), જો ડાબો ભાગ (આપની શરત) true હોય. પરંતુ જો શરત false હોય, તો આખી expression false બની જાય છે. React false ને JSX ટ્રી માં “ખાલી જગ્યા” તરીકે માને છે, જેમ કે null અથવા undefined, અને તેની જગ્યાએ કશું જ રેન્ડર કરતું નથી.

Pitfall

નંબરને && ની ડાબી બાજુ પર ન મૂકો.

શરતને તપાસવા માટે, જાવાસ્ક્રિપ્ટ ડાબા ભાગને આપમેળે બૂલિયનમાં પરિવર્તિત કરે છે. જો ડાબો ભાગ 0 હોય, તો આખી એક્સપ્રેશન્‍સ તેની કિંમત (0) મેળવશે, અને React ખુશીથી 0 રેન્ડર કરશે, કશું નહીં રેન્ડર કરવાનો બદલે.

ઉદાહરણ તરીકે, સામાન્ય ભૂલ એ છે કે તમે આ પ્રકારે કોડ લખો: messageCount && <p>New messages</p>. સાહજિક રીતે એવું માનવું સરળ છે કે જ્યારે messageCount 0 હોય ત્યારે તે કશું જ રેન્ડર નહીં કરે, પરંતુ વાસ્તવમાં તે 0 જ રેન્ડર કરે છે!

તેને ઠીક કરવા માટે, ડાબો ભાગ બુલિયન બનાવો: messageCount > 0 && <p>New messages</p>.

JSX ને શરતી રીતે વેરીએબલને ફાળવવું

જ્યારે શોર્ટકટ્સ સરળ કોડ લખવામાં અવરોધ રૂપ બને ત્યારે, if સ્ટેટમેન્ટ અને વેરીએબલનો ઉપયોગ કરવાનો પ્રયત્ન કરો. તમે let વડે વ્યાખ્યાયિત વેરીએબલ્સને ફરી ફાળવી શકો છો, એટલે કે, તમે દર્શાવવા માંગતા ડિફોલ્ટ કન્ટેન્ટથી પ્રારંભ કરો, જેમ કે name:

let itemContent = name;

if સ્ટેટમેન્ટનો ઉપયોગ કરીને JSX એક્સપ્રેશનને itemContentમાં ફરી ફાળવો જો isPacked true હોય:

if (isPacked) {
  itemContent = name + " ✅";
}

કૌંસો (curly braces) “જાવાસ્ક્રિપ્ટમાં વિન્ડો” ખોલે છે. રીટર્ન કરેલા JSX ટ્રીમાં કૌંસ સાથે વેરિએબલ એમ્બેડ કરો,અને અગાઉ ગણવામાં આવેલ એક્સપ્રેશન JSXની અંદર નેસ્ટ કરો:

<li className="item">
  {itemContent}
</li>

આ શૈલી સૌથી વધારે વર્બોઝ (Verbose) છે, પરંતુ તે સૌથી વધુ લવચીક પણ છે. અહીં તે પ્રયોગમાં છે:

function Item({ name, isPacked }) {
  let itemContent = name;
  if (isPacked) {
    itemContent = name + " ✅";
  }
  return (
    <li className="item">
      {itemContent}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

અગાઉની જેમ, આ માત્ર ટેક્સ્ટ માટે જ નહીં પરંતુ મનચાહું JSX માટે પણ કાર્ય કરે છે:

function Item({ name, isPacked }) {
  let itemContent = name;
  if (isPacked) {
    itemContent = (
      <del>
        {name + " ✅"}
      </del>
    );
  }
  return (
    <li className="item">
      {itemContent}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

જો તમે જાવાસ્ક્રિપ્ટથી પરિચિત નથી, તો આ શૈલીઓની વિવિધતા પ્રથમ દ્રષ્ટિએ બહુ જટિલ લાગી શકે છે. તેમ છતાં, તેને શીખવાથી તમને કોઇ પણ જાવાસ્ક્રિપ્ટ કોડ — અને ફક્ત React કમ્પોનેન્ટસ જ નહિ — વાંચવા અને લખવામાં મદદ મળશે! શરૂઆતમાં જે શૈલી તમને યોગ્ય લાગતી હોય, તે પસંદ કરો, અને પછી જો બીજાની કાર્યપદ્ધતિ ભૂલી જાવ તો આ સંદર્ભ ફરીથી તપાસો.

Recap

  • Reactમાં, તમે branching logicને જાવાસ્ક્રિપ્ટની મદદથી નિયંત્રિત કરી શકો છો.
  • તમે if statement નો ઉપયોગ કરીને JSX શરતી રીતે રીટર્ન કરી શકો છો.
  • તમે શરતો મુજબ JSXને વેરીએબલમાં સાચવી શકો છો અને પછી તેને બીજા JSX માં curly braces નો ઉપયોગ કરીને સમાવિષ્ટ કરી શકો છો.
  • JSXમાં, {cond ? <A /> : <B />}નો અર્થ છે “જો cond સાચું હોય, તો <A /> દર્શાવો, નહીં તો <B />”.
  • JSXમાં, {cond && <A />}નો અર્થ છે “જો cond સાચું હોય, તો <A /> દર્શાવો, નહીં તો કંઈ પણ ન દર્શાવો”.
  • આ શોર્ટકટ્સ સામાન્ય છે, પરંતુ તમે plain if નો ઉપયોગ કરવાની પસંદગી કરો છો તો તે તમારી પસંદગી છે.

Try out some challenges

Challenge 1 of 3:
અપૂર્ણ આઇટમ્સ માટે આઇકન બતાવવા ? : નો ઉપયોગ કરો.

cond ? a : b શરતનો ઉપયોગ કરીને, જયારે isPacked ખોટું હોય ત્યારે ❌ દર્શાવો.

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✅'}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}
PreviousPassing Props to a Component
NextRendering Lists