From b9d677d86656a34cc92314945fbdb0d791b18b31 Mon Sep 17 00:00:00 2001
From: Nirmit Kotadiya <kotadiyanirmit24@gmail.com>
Date: Wed, 9 Jul 2025 23:07:58 +0530
Subject: [PATCH] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 289 ++++++++++-----------
 1 file changed, 138 insertions(+), 151 deletions(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 57fe0a311..1759a8828 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -10,15 +10,15 @@ title: શરતી રેન્ડરિંગ
 
 <YouWillLearn>
 
-* શરત પર આધાર રાખી અલગ JSX કેવી રીતે રીટર્ન કરવો.
+* શરત પર આધાર રાખી અલગ JSX કેવી રીતે રીટર્ન કરવી.
 * JSX ના ભાગને શરતી રીતે કેવી રીતે ઉમેરવો અથવા કાઢી નાખવો.
 * React કોડબેઝમાં તમને મળતી સામાન્ય શરત આધારિત સિન્ટેક્સ શોર્ટકટ્સ.
 
 </YouWillLearn>
 
 ## શરતી રીતે JSX રીટર્ન કરવું {/*conditionally-returning-jsx*/}
-  
-માનો કે તમારી પાસે `PackingList`નામનું કમ્પોનેન્ટ છે, જે કેટલીક `Items` રેન્ડર કરે છે, જેમને packed  તરીકે અથવા not packed તરીકે ચિહ્નિત કરી શકાય છે:
+
+માનો કે તમારી પાસે `PackingList` નામનું કમ્પોનેન્ટ છે, જે અમુક `Item`s રેન્ડર કરે છે, જેમને packed તરીકે અથવા not packed તરીકે ચિહ્નિત કરી શકાય છે:
 
 <Sandpack>
 
@@ -32,17 +32,17 @@ export default function PackingList() {
     <section>
       <h1>Sally Ride's Packing List</h1>
       <ul>
-        <Item 
-          isPacked={true} 
-          name="Space suit" 
+        <Item
+          isPacked={true}
+          name="Space suit"
         />
-        <Item 
-          isPacked={true} 
-          name="Helmet with a golden leaf" 
+        <Item
+          isPacked={true}
+          name="Helmet with a golden leaf"
         />
-        <Item 
-          isPacked={false} 
-          name="Photo of Tam" 
+        <Item
+          isPacked={false}
+          name="Photo of Tam"
         />
       </ul>
     </section>
@@ -52,21 +52,18 @@ export default function PackingList() {
 
 </Sandpack>
 
-ધ્યાન આપો કે કેટલીક `Item` કમ્પોનેન્ટસમાં `isPacked` prop `true` તરીકે સેટ છે, જ્યારે કેટલીકમાં `false` છે. જો `isPacked={true}` હોય, તો packed કરેલા આઇટમ્સ માટે તમે ચેકમાર્ક (✅) કરી શકો છો.
+ધ્યાન આપો કે અમુક `Item` કમ્પોનેન્ટસમાં `isPacked` prop `true` તરીકે સેટ છે, જ્યારે અમુકમાં `false` છે. જો `isPacked={true}` હોય, તો packed કરેલા items માટે તમે ચેકમાર્ક (✅) કરી શકો છો.
 
 તમે આને [`if`/`else` સ્ટેટમેન્ટ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) તરીકે આ રીતે લખી શકો છો:
 
- 
-
 ```js
 if (isPacked) {
   return <li className="item">{name} ✅</li>;
 }
 return <li className="item">{name}</li>;
 ```
- 
 
-જો `isPacked` prop `true` છે, તો આ કોડ **અલગ JSX tree રીટર્ન કરે છે.** આ બદલાવના કારણે, કેટલીક આઇટમ્સના અંતે ચેકમાર્ક(✅) જોવા મળશે.
+જો `isPacked` prop `true` છે, તો આ કોડ **અલગ JSX tree રીટર્ન કરશે.** આ બદલાવના કારણે, અમુક items ના અંતે ચેકમાર્ક(✅) જોવા મળશે.
 
 <Sandpack>
 
@@ -83,17 +80,17 @@ export default function PackingList() {
     <section>
       <h1>Sally Ride's Packing List</h1>
       <ul>
-        <Item 
-          isPacked={true} 
-          name="Space suit" 
+        <Item
+          isPacked={true}
+          name="Space suit"
         />
-        <Item 
-          isPacked={true} 
-          name="Helmet with a golden leaf" 
+        <Item
+          isPacked={true}
+          name="Helmet with a golden leaf"
         />
-        <Item 
-          isPacked={false} 
-          name="Photo of Tam" 
+        <Item
+          isPacked={false}
+          name="Photo of Tam"
         />
       </ul>
     </section>
@@ -102,15 +99,14 @@ export default function PackingList() {
 ```
 
 </Sandpack>
- 
 
 પ્રત્યેક કિસ્સામાં શું રીટર્ન થાય છે તે એડિટ કરવાનો પ્રયત્ન કરો, અને પરિણામ કેવી રીતે બદલાય છે તે જુઓ!
 
-નોધો કે તમે જાવાસ્ક્રિપ્ટ ના `if` અને `return` સ્ટેટમેન્ટ્સ સાથે શાખાવાળા લોજિક બનાવો છો. React માં, કંટ્રોલ ફ્લો (જેમ કે શરતો) જાવાસ્ક્રિપ્ટ દ્વારા સંચાલિત થાય છે.
+નોધો કે તમે જાવાસ્ક્રિપ્ટ ના `if` અને `return` સ્ટેટમેન્ટ્સ સાથે ભેગું લોજિક બનાવો છો. React માં, કંટ્રોલ ફ્લો (જેમ કે શરતો) જાવાસ્ક્રિપ્ટ દ્વારા નિયંત્રિત થાય છે.
 
-### શરતી રીતે `null` સાથે કશું જ રીટર્ન ન કરવું.{/*conditionally-returning-nothing-with-null*/}
+### શરતી રીતે `null` સાથે કશું જ રીટર્ન કરશે નહીં. {/*conditionally-returning-nothing-with-null*/}
 
-કેટલીક પરિસ્થિતિઓમાં, તમે કશું પણ રેન્ડર કરવા માંગતા નથી. ઉદાહરણ તરીકે, માનો કે તમે packed કરેલ આઇટમ્સ દર્શાવવા માંગતા નથી. એક કમ્પોનેન્ટને કંઈક રીટર્ન કરવું જરૂરી છે. આ કિસ્સામાં, તમે `null` રીટર્ન કરી શકો છો:
+અમુક પરિસ્થિતિઓમાં, તમે કશું પણ રેન્ડર કરવા માંગતા નથી. ઉદાહરણ તરીકે, માનો કે તમે packed કરેલ items દર્શાવવા માંગતા નથી. એક કમ્પોનેન્ટને કંઈક રીટર્ન કરવું જરૂરી છે. આ કિસ્સામાં, તમે `null` રીટર્ન કરી શકો છો:
 
 ```js
 if (isPacked) {
@@ -118,9 +114,8 @@ if (isPacked) {
 }
 return <li className="item">{name}</li>;
 ```
- 
-જો `isPacked` સાચું છે, તો કમ્પોનેન્ટ કશું પણ રીટર્ન નહીં કરે, એટલે કે `null`. અન્યથા, તે JSX રેન્ડર કરવા માટે રીટર્ન કરશે.
- 
+
+જો `isPacked` true છે, તો કમ્પોનેન્ટ કશું પણ રીટર્ન નહીં કરે, એટલે કે `null`. અન્યથા, તે JSX રેન્ડર કરવા માટે રીટર્ન કરશે.
 
 <Sandpack>
 
@@ -137,17 +132,17 @@ export default function PackingList() {
     <section>
       <h1>Sally Ride's Packing List</h1>
       <ul>
-        <Item 
-          isPacked={true} 
-          name="Space suit" 
+        <Item
+          isPacked={true}
+          name="Space suit"
         />
-        <Item 
-          isPacked={true} 
-          name="Helmet with a golden leaf" 
+        <Item
+          isPacked={true}
+          name="Helmet with a golden leaf"
         />
-        <Item 
-          isPacked={false} 
-          name="Photo of Tam" 
+        <Item
+          isPacked={false}
+          name="Photo of Tam"
         />
       </ul>
     </section>
@@ -156,13 +151,12 @@ export default function PackingList() {
 ```
 
 </Sandpack>
- 
 
-વ્યવહારમાં, એક કમ્પોનેન્ટમાંથી `null` રીટર્ન કરવું સામાન્ય નથી કારણ કે તે તેને રેન્ડર કરવાનો પ્રયાસ કરનાર ડેવલપરને આશ્ચર્યમાં મૂકશે. વધારે પડતીવાર, તમે પેરેન્ટ કમ્પોનેન્ટના JSXમાં કમ્પોનેન્ટને શરતસર શામેલ કરવા કે બહાર કરવા પસંદ કરશો. તે કેવી રીતે કરવું તે અહીં છે!
+વ્યવહારમાં, એક કમ્પોનેન્ટમાંથી `null` રીટર્ન કરવું સામાન્ય નથી કારણ કે તે તેને રેન્ડર કરવાનો પ્રયાસ કરનાર ડેવલપરને આશ્ચર્યમાં મૂકશે. વધારે વાર, તમે પેરેન્ટ કમ્પોનેન્ટના JSX માં કમ્પોનેન્ટને શરતસર શામેલ કરવા કે બહાર કરવા પસંદ કરશો. તે કેવી રીતે કરવું તે અહીં છે!
 
 ## શરતી રીતે JSX સમાવિષ્ટ કરવું {/*conditionally-including-jsx*/}
 
-પહેલાના ઉદાહરણમાં, તમે નિયંત્રિત કર્યું હતું કે કયું (અથવા કંઈ નહીં!) JSX tree કમ્પોનેન્ટ દ્વારા રીટર્ન થશે. તમે કદાચ રેન્ડર આઉટપુટમાં થોડી પુનરાવર્તન જોઈ હશે. 
+પહેલાના ઉદાહરણમાં, તમે નિયંત્રિત કર્યું હતું કે કયું (અથવા કંઈ નહીં!) JSX tree કમ્પોનેન્ટ દ્વારા રીટર્ન થશે. તમે કદાચ રેન્ડર આઉટપુટમાં થોડી પુનરાવર્તન જોઈ હશે.
 
 ```js
 <li className="item">{name} ✅</li>
@@ -186,10 +180,10 @@ return <li className="item">{name}</li>;
 જોકે આ પુનરાવૃત્તિ નુકસાનકારક નથી, તે તમારા કોડને જાળવવા માટે મુશ્કેલ બનાવી શકે છે. જો તમારે `className` બદલવું પડે, તો તમારે તમારા કોડની બે અલગ અલગ જગ્યાએ આ ફેરફાર કરવો પડશે! આવી પરિસ્થિતિમાં, તમે તમારા કોડને વધુ [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) બનાવવા માટે શરતી રીતે થોડું JSX સામેલ કરી શકો છો.
 
 ### શરતી (ટર્નરી) ઓપરેટર (`? :`) {/*conditional-ternary-operator--*/}
- 
+
 જાવાસ્ક્રિપ્ટ માં શરતી એક્સપ્રેશન લખવા માટે સંક્ષિપ્ત સિનટેક્સ છે - [`શરતી ઓપરેટર`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) અથવા "ટર્નરી ઓપરેટર".
 
-આના બદલે: 
+આના બદલે:
 
 ```js
 if (isPacked) {
@@ -208,18 +202,17 @@ return (
 );
 ```
 
-
-તમે આ રીતે વાંચી શકો છો: *"જો `isPacked` સાચું છે, તો (`?`) `name + ' ✅'` રેન્ડર કરો, અન્યથા (`:`) `name` રેન્ડર કરો"*.
+તમે આ રીતે વાંચી શકો છો: *"જો `isPacked` true છે, તો (`?`) `name + ' ✅'` રેન્ડર કરો, અન્યથા (`:`) `name` રેન્ડર કરો"*.
 
 <DeepDive>
 
 #### શું આ બે ઉદાહરણ સંપૂર્ણ રીતે સમાન છે? {/*are-these-two-examples-fully-equivalent*/}
- 
+
 જો તમે ઓબ્જેક્ટ-ઓરિએન્ટેડ પ્રોગ્રામિંગ પૃષ્ઠભૂમિમાંથી આવી રહ્યા છો, તો તમે માની શકો છો કે ઉપરના બંને ઉદાહરણો થોડા અલગ છે , કારણ કે એક `<li>` ના બે અલગ-અલગ "instances" બનાવે છે. પણ JSX એલીમેન્ટ્સ "instances" નથી, કારણ કે તે કોઈ આંતરિક state ધરાવતા નથી અને એ સાચા DOM નોડ્સ નથી. તે લાઇટવેઇટ વર્ણનાઓ છે, જેમ કે બ્લૂપ્રિન્ટ. તેથી આ બે ઉદાહરણો વાસ્તવમાં સંપૂર્ણ રીતે સમાન છે. [સ્ટેટ જાળવવું અને ફરીથી સેટ કરવું](/learn/preserving-and-resetting-state) એ કેવી રીતે કામ કરે છે તેની વિગતવાર માહિતી આપવામાં આવી છે.
 
 </DeepDive>
 
-હવે માનો કે તમે પૂર્ણ થયેલા આઇટમના ટેક્સ્ટને બીજાં HTML ટૅગ, જેમ કે `<del>`,માં વીંટવા માંગો છો જેથી તે સ્ટ્રાઇક થતું દેખાય. દરેક કિસ્સામાં વધુ JSXને સારી રીતે ગૂંથવા માટે તમે newline અને parentheses ઉમેરી શકો છો.
+હવે માનો કે તમે પૂર્ણ થયેલા item ના ટેક્સ્ટને બીજાં HTML ટૅગ, જેમ કે `<del>`,માં વાપરવા માંગો છો જેથી તે સ્ટ્રાઇક થતું દેખાય. દરેક કિસ્સામાં વધુ JSX ને સારી રીતે nested રીતે ઉમેરવા માટે તમે newline અને parentheses ઉમેરી શકો છો.
 
 <Sandpack>
 
@@ -243,17 +236,17 @@ export default function PackingList() {
     <section>
       <h1>Sally Ride's Packing List</h1>
       <ul>
-        <Item 
-          isPacked={true} 
-          name="Space suit" 
+        <Item
+          isPacked={true}
+          name="Space suit"
         />
-        <Item 
-          isPacked={true} 
-          name="Helmet with a golden leaf" 
+        <Item
+          isPacked={true}
+          name="Helmet with a golden leaf"
         />
-        <Item 
-          isPacked={false} 
-          name="Photo of Tam" 
+        <Item
+          isPacked={false}
+          name="Photo of Tam"
         />
       </ul>
     </section>
@@ -262,11 +255,11 @@ export default function PackingList() {
 ```
 
 </Sandpack>
-આ શૈલી સરળ શરતો માટે સારી રીતે કામ કરે છે, પરંતુ તેને મર્યાદિત પ્રમાણમાં જ ઉપયોગ કરો. જો તમારા કમ્પોનેન્ટમાં ખૂબ Nested શરતી માર્કઅપને કારણે ગૂંચવણ થાય, તો વસ્તુઓને સ્પષ્ટ કરવા માટે ચાઈલ્ડ કમ્પોનેન્ટને અલગ કાઢવાનું વિચારવું જોઈએ. Reactમાં, માર્કઅપ તમારા કોડનો જ ભાગ હોય છે, તેથી તમે કૉમ્પ્લેક્સ એક્સપ્રેશન્‍સ ને સરળ બનાવવા માટે વેરીએબલ્સ અને ફંક્શન્સ જેવા ટૂલ્સનો ઉપયોગ કરી શકો છો.
+આ શૈલી સરળ શરતો માટે સારી રીતે કામ કરે છે, પરંતુ તેને મર્યાદિત પ્રમાણમાં જ ઉપયોગ કરો. જો તમારા કમ્પોનેન્ટમાં ખૂબ Nested શરતી માર્કઅપને કારણે ગૂંચવણ થાય, તો વસ્તુઓને સ્પષ્ટ કરવા માટે ચાઈલ્ડ કમ્પોનેન્ટને અલગ કાઢવાનું વિચારવું જોઈએ. React માં, માર્કઅપ તમારા કોડનો જ ભાગ હોય છે, તેથી તમે કૉમ્પ્લેક્સ એક્સપ્રેશન્‍સ ને સરળ બનાવવા માટે વેરીએબલ્સ અને ફંક્શન્સ જેવા ટૂલ્સનો ઉપયોગ કરી શકો છો.
 
 ### લોજિકલ AND ઑપરેટર (`&&`) {/*logical-and-operator-*/}
- 
-React કમ્પોનેન્ટસમાં તમે સામાન્ય રીતે [જાવાસ્ક્રિપ્ટ લોજિકલ AND (`&&`) ઓપરેટર](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) નો ઉપયોગ કરશો.આનો ઉપયોગ ત્યારે થાય છે જ્યારે તમારી શરત સાચી હોય ત્યારે કેટલીક JSX રેન્ડર કરવા માંગતા હો, **અથવા અન્યથા કશું જ રેન્ડર ન કરો.** `&&` ની મદદથી, તમે `isPacked` `true` હોય ત્યારે જ ચેકમાર્ક શરતી રીતે રેન્ડર કરી શકો:
+
+React કમ્પોનેન્ટસમાં તમે સામાન્ય રીતે [જાવાસ્ક્રિપ્ટ લોજિકલ AND (`&&`) ઓપરેટર](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) નો ઉપયોગ કરશો.આનો ઉપયોગ ત્યારે થાય છે જ્યારે તમારી શરત સાચી હોય ત્યારે અમુક JSX રેન્ડર કરવા માંગતા હો, **અથવા અન્યથા કશું જ રેન્ડર ન કરો.** `&&` ની મદદથી, તમે `isPacked` `true` હોય ત્યારે જ ચેકમાર્ક શરતી રીતે રેન્ડર કરી શકો:
 
 ```js
 return (
@@ -280,7 +273,6 @@ return (
 
 આ છે તેનું કાર્યરત ઉદાહરણ:
 
-
 <Sandpack>
 
 ```js
@@ -297,17 +289,17 @@ export default function PackingList() {
     <section>
       <h1>Sally Ride's Packing List</h1>
       <ul>
-        <Item 
-          isPacked={true} 
-          name="Space suit" 
+        <Item
+          isPacked={true}
+          name="Space suit"
         />
-        <Item 
-          isPacked={true} 
-          name="Helmet with a golden leaf" 
+        <Item
+          isPacked={true}
+          name="Helmet with a golden leaf"
         />
-        <Item 
-          isPacked={false} 
-          name="Photo of Tam" 
+        <Item
+          isPacked={false}
+          name="Photo of Tam"
         />
       </ul>
     </section>
@@ -317,15 +309,13 @@ export default function PackingList() {
 
 </Sandpack>
  
-એક [જાવાસ્ક્રિપ્ટ && એક્સપ્રેશન્‍સ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) એ તેના જમણા ભાગની કિંમત પરત કરે છે (આપના કેસમાં, ચેકમાર્ક), જો ડાબો ભાગ (આપની શરત) `true` હોય. પરંતુ જો શરત `false` હોય, તો આખી expression `false` બની જાય છે. React `false` ને JSX ટ્રી માં "ખાલી જગ્યા" તરીકે માને છે, જેમ કે `null` અથવા `undefined`, અને તેની જગ્યાએ કશું જ રેન્ડર કરતું નથી. 
- 
-
+એક [જાવાસ્ક્રિપ્ટ && એક્સપ્રેશન્‍સ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) એ તેના જમણા ભાગની value પરત કરે છે (આપના કેસમાં, ચેકમાર્ક), જો ડાબો ભાગ (આપની શરત) `true` હોય. પરંતુ જો શરત `false` હોય, તો આખી expression `false` બની જાય છે. React `false` ને JSX tree માં "ખાલી જગ્યા" તરીકે માને છે, જેમ કે `null` અથવા `undefined`, અને તેની જગ્યાએ કશું જ રેન્ડર કરતું નથી.
 
 <Pitfall>
 
-**નંબરને `&&` ની ડાબી બાજુ પર ન મૂકો.**  
- 
-શરતને તપાસવા માટે, જાવાસ્ક્રિપ્ટ ડાબા ભાગને આપમેળે બૂલિયનમાં પરિવર્તિત કરે છે. જો ડાબો ભાગ `0` હોય, તો આખી એક્સપ્રેશન્‍સ તેની કિંમત (`0`) મેળવશે, અને React ખુશીથી `0` રેન્ડર કરશે, કશું નહીં રેન્ડર કરવાનો બદલે.   
+**નંબરને `&&` ની ડાબી બાજુ પર ન મૂકો.**
+
+શરતને તપાસવા માટે, જાવાસ્ક્રિપ્ટ ડાબા ભાગને આપમેળે બૂલિયનમાં પરિવર્તિત કરે છે. જો ડાબો ભાગ `0` હોય, તો આખી એક્સપ્રેશન્‍સ તેની value (`0`) મેળવશે, અને React ખુશીથી `0` રેન્ડર કરશે, કશું નહીં રેન્ડર કરવાનો બદલે.
 
 ઉદાહરણ તરીકે, સામાન્ય ભૂલ એ છે કે તમે આ પ્રકારે કોડ લખો: `messageCount && <p>New messages</p>`. સાહજિક રીતે એવું માનવું સરળ છે કે જ્યારે `messageCount` `0` હોય ત્યારે તે કશું જ રેન્ડર નહીં કરે, પરંતુ વાસ્તવમાં તે `0` જ રેન્ડર કરે છે!
 
@@ -333,29 +323,30 @@ export default function PackingList() {
 
 </Pitfall>
 
-### JSX ને શરતી રીતે વેરીએબલને ફાળવવું{/*conditionally-assigning-jsx-to-a-variable*/}
- 
+### JSX ને શરતી રીતે વેરીએબલને ફાળવવું {/*conditionally-assigning-jsx-to-a-variable*/}
 
 જ્યારે શોર્ટકટ્સ સરળ કોડ લખવામાં અવરોધ રૂપ બને ત્યારે, `if` સ્ટેટમેન્ટ અને વેરીએબલનો ઉપયોગ કરવાનો પ્રયત્ન કરો. તમે [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) વડે વ્યાખ્યાયિત વેરીએબલ્સને ફરી ફાળવી શકો છો, એટલે કે, તમે દર્શાવવા માંગતા ડિફોલ્ટ કન્ટેન્ટથી પ્રારંભ કરો, જેમ કે name:
 
 ```js
 let itemContent = name;
 ```
- 
+
 `if` સ્ટેટમેન્ટનો ઉપયોગ કરીને JSX એક્સપ્રેશનને `itemContent`માં ફરી ફાળવો જો `isPacked` `true` હોય:
+
 ```js
 if (isPacked) {
   itemContent = name + " ✅";
 }
 ```
 
-[કૌંસો (curly braces) "જાવાસ્ક્રિપ્ટમાં વિન્ડો" ખોલે છે.](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) રીટર્ન કરેલા JSX ટ્રીમાં કૌંસ સાથે વેરિએબલ એમ્બેડ કરો,અને અગાઉ ગણવામાં આવેલ એક્સપ્રેશન JSXની અંદર નેસ્ટ કરો:
+[કૌંસો (curly braces) "જાવાસ્ક્રિપ્ટમાં વિન્ડો" ખોલે છે.](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) રીટર્ન કરેલા JSX tree માં કૌંસ સાથે વેરિએબલ એમ્બેડ કરો,અને અગાઉ ગણવામાં આવેલ એક્સપ્રેશન JSX ની અંદર nest કરો:
 
 ```js
 <li className="item">
   {itemContent}
 </li>
 ```
+
 આ શૈલી સૌથી વધારે વર્બોઝ (Verbose) છે, પરંતુ તે સૌથી વધુ લવચીક પણ છે. અહીં તે પ્રયોગમાં છે:
 
 <Sandpack>
@@ -378,17 +369,17 @@ export default function PackingList() {
     <section>
       <h1>Sally Ride's Packing List</h1>
       <ul>
-        <Item 
-          isPacked={true} 
-          name="Space suit" 
+        <Item
+          isPacked={true}
+          name="Space suit"
         />
-        <Item 
-          isPacked={true} 
-          name="Helmet with a golden leaf" 
+        <Item
+          isPacked={true}
+          name="Helmet with a golden leaf"
         />
-        <Item 
-          isPacked={false} 
-          name="Photo of Tam" 
+        <Item
+          isPacked={false}
+          name="Photo of Tam"
         />
       </ul>
     </section>
@@ -400,7 +391,6 @@ export default function PackingList() {
   
 અગાઉની જેમ, આ માત્ર ટેક્સ્ટ માટે જ નહીં પરંતુ મનચાહું JSX માટે પણ કાર્ય કરે છે:
 
-
 <Sandpack>
 
 ```js
@@ -425,17 +415,17 @@ export default function PackingList() {
     <section>
       <h1>Sally Ride's Packing List</h1>
       <ul>
-        <Item 
-          isPacked={true} 
-          name="Space suit" 
+        <Item
+          isPacked={true}
+          name="Space suit"
         />
-        <Item 
-          isPacked={true} 
-          name="Helmet with a golden leaf" 
+        <Item
+          isPacked={true}
+          name="Helmet with a golden leaf"
         />
-        <Item 
-          isPacked={false} 
-          name="Photo of Tam" 
+        <Item
+          isPacked={false}
+          name="Photo of Tam"
         />
       </ul>
     </section>
@@ -445,27 +435,25 @@ export default function PackingList() {
 
 </Sandpack>
 
-જો તમે જાવાસ્ક્રિપ્ટથી પરિચિત નથી, તો આ શૈલીઓની વિવિધતા પ્રથમ દ્રષ્ટિએ બહુ જટિલ લાગી શકે છે. તેમ છતાં, તેને શીખવાથી તમને કોઇ પણ જાવાસ્ક્રિપ્ટ કોડ --  અને ફક્ત React કમ્પોનેન્ટસ જ નહિ -- વાંચવા અને લખવામાં મદદ મળશે! શરૂઆતમાં જે શૈલી તમને યોગ્ય લાગતી હોય, તે પસંદ કરો, અને પછી જો બીજાની કાર્યપદ્ધતિ ભૂલી જાવ તો આ સંદર્ભ ફરીથી તપાસો.
+જો તમે જાવાસ્ક્રિપ્ટથી પરિચિત નથી, તો આ શૈલીઓની વિવિધતા પ્રથમ દ્રષ્ટિએ બહુ જટિલ લાગી શકે છે. તેમ છતાં, તેને શીખવાથી તમને કોઇ પણ જાવાસ્ક્રિપ્ટ કોડ -- અને ફક્ત React કમ્પોનેન્ટસ જ નહિ -- વાંચવા અને લખવામાં મદદ મળશે! શરૂઆતમાં જે શૈલી તમને યોગ્ય લાગતી હોય, તે પસંદ કરો, અને પછી જો બીજાની કાર્યપદ્ધતિ ભૂલી જાવ તો આ સંદર્ભ ફરીથી તપાસો.
 
 <Recap>
  
-* Reactમાં, તમે branching logicને જાવાસ્ક્રિપ્ટની મદદથી નિયંત્રિત કરી શકો છો.
+* React માં, તમે branching logic ને જાવાસ્ક્રિપ્ટની મદદથી નિયંત્રિત કરી શકો છો.
 * તમે `if` statement નો ઉપયોગ કરીને JSX શરતી રીતે રીટર્ન કરી શકો છો.
-* તમે શરતો મુજબ JSXને વેરીએબલમાં સાચવી શકો છો અને પછી તેને બીજા JSX માં curly braces નો ઉપયોગ કરીને સમાવિષ્ટ કરી શકો છો.
-* JSXમાં, `{cond ? <A /> : <B />}`નો અર્થ છે *"જો `cond` સાચું હોય, તો `<A />` દર્શાવો, નહીં તો `<B />`"*.
-* JSXમાં, `{cond && <A />}`નો અર્થ છે *"જો `cond` સાચું હોય, તો `<A />` દર્શાવો, નહીં તો કંઈ પણ ન દર્શાવો"*.
-* આ શોર્ટકટ્સ સામાન્ય છે, પરંતુ તમે plain `if` નો ઉપયોગ કરવાની પસંદગી કરો છો તો તે તમારી પસંદગી છે.
+* તમે શરતો મુજબ JSX ને વેરીએબલમાં સાચવી શકો છો અને પછી તેને બીજા JSX માં curly braces નો ઉપયોગ કરીને સમાવિષ્ટ કરી શકો છો.
+* JSX માં, `{cond ? <A /> : <B />}`નો અર્થ છે *"જો `cond` true હોય, તો `<A />` દર્શાવો, નહીં તો `<B />`"*.
+* JSX માં, `{cond && <A />}`નો અર્થ છે *"જો `cond` true હોય, તો `<A />` દર્શાવો, નહીં તો કંઈ પણ ન દર્શાવો"*.
+* આ શોર્ટકટ્સ સામાન્ય છે, પરંતુ તમે plain `if` નો ઉપયોગ કરવાની ઇચ્છા કરો છો તો તે તમારી ઇચ્છા છે.
 
 </Recap>
 
-
-
 <Challenges>
 
-#### અપૂર્ણ આઇટમ્સ માટે આઇકન બતાવવા `? :` નો ઉપયોગ કરો. {/*show-an-icon-for-incomplete-items-with--*/}
+#### અપૂર્ણ items માટે આઇકન બતાવવા `? :` નો ઉપયોગ કરો. {/*show-an-icon-for-incomplete-items-with--*/}
+
+`cond ? a : b` શરતનો ઉપયોગ કરીને, જયારે `isPacked` false હોય ત્યારે ❌ દર્શાવો.
 
-`cond ? a : b` શરતનો ઉપયોગ કરીને, જયારે `isPacked` ખોટું હોય ત્યારે ❌ દર્શાવો.
- 
 <Sandpack>
 
 ```js
@@ -482,17 +470,17 @@ export default function PackingList() {
     <section>
       <h1>Sally Ride's Packing List</h1>
       <ul>
-        <Item 
-          isPacked={true} 
-          name="Space suit" 
+        <Item
+          isPacked={true}
+          name="Space suit"
         />
-        <Item 
-          isPacked={true} 
-          name="Helmet with a golden leaf" 
+        <Item
+          isPacked={true}
+          name="Helmet with a golden leaf"
         />
-        <Item 
-          isPacked={false} 
-          name="Photo of Tam" 
+        <Item
+          isPacked={false}
+          name="Photo of Tam"
         />
       </ul>
     </section>
@@ -520,17 +508,17 @@ export default function PackingList() {
     <section>
       <h1>Sally Ride's Packing List</h1>
       <ul>
-        <Item 
-          isPacked={true} 
-          name="Space suit" 
+        <Item
+          isPacked={true}
+          name="Space suit"
         />
-        <Item 
-          isPacked={true} 
-          name="Helmet with a golden leaf" 
+        <Item
+          isPacked={true}
+          name="Helmet with a golden leaf"
         />
-        <Item 
-          isPacked={false} 
-          name="Photo of Tam" 
+        <Item
+          isPacked={false}
+          name="Photo of Tam"
         />
       </ul>
     </section>
@@ -544,8 +532,7 @@ export default function PackingList() {
 
 #### આઇટમનું મહત્વ દર્શાવવા માટે `&&` નો ઉપયોગ કરો. {/*show-the-item-importance-with-*/}
 
-આ ઉદાહરણમાં, દરેક `Item` ને સંખ્યાત્મક `importance` prop પ્રાપ્ત થાય છે. `&&` ઓપરેટરનો ઉપયોગ "_(Importance: X)_" ઇટાલિકમાં દર્શાવવા માટે કરો, પરંતુ ફક્ત એવા આઇટમ્સ માટે જ, જેઓનું importance શૂન્ય કરતાં વધુ છે. તમારી આઈટમની સૂચિ આ રીતે દેખાશે:
-
+આ ઉદાહરણમાં, દરેક `Item` ને સંખ્યાત્મક `importance` prop પ્રાપ્ત થાય છે. `&&` ઓપરેટરનો ઉપયોગ "_(Importance: X)_" ઇટાલિકમાં દર્શાવવા માટે કરો, પરંતુ ફક્ત એવા items માટે જ, જેઓનું importance શૂન્ય કરતાં વધુ છે. તમારી item ની સૂચિ આ રીતે દેખાશે:
 
 * Space suit _(Importance: 9)_
 * Helmet with a golden leaf
@@ -569,17 +556,17 @@ export default function PackingList() {
     <section>
       <h1>Sally Ride's Packing List</h1>
       <ul>
-        <Item 
-          importance={9} 
-          name="Space suit" 
+        <Item
+          importance={9}
+          name="Space suit"
         />
-        <Item 
-          importance={0} 
-          name="Helmet with a golden leaf" 
+        <Item
+          importance={0}
+          name="Helmet with a golden leaf"
         />
-        <Item 
-          importance={6} 
-          name="Photo of Tam" 
+        <Item
+          importance={6}
+          name="Photo of Tam"
         />
       </ul>
     </section>
@@ -613,17 +600,17 @@ export default function PackingList() {
     <section>
       <h1>Sally Ride's Packing List</h1>
       <ul>
-        <Item 
-          importance={9} 
-          name="Space suit" 
+        <Item
+          importance={9}
+          name="Space suit"
         />
-        <Item 
-          importance={0} 
-          name="Helmet with a golden leaf" 
+        <Item
+          importance={0}
+          name="Helmet with a golden leaf"
         />
-        <Item 
-          importance={6} 
-          name="Photo of Tam" 
+        <Item
+          importance={6}
+          name="Photo of Tam"
         />
       </ul>
     </section>