diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md
index d3507184..5068e7e9 100644
--- a/src/content/learn/preserving-and-resetting-state.md
+++ b/src/content/learn/preserving-and-resetting-state.md
@@ -1,28 +1,28 @@
 ---
-title: Preserving and Resetting State
+title: State ને સાચવી રાખવું અને ફરીથી સેટ કરવું
 ---
 
 <Intro>
 
-State is isolated between components. React keeps track of which state belongs to which component based on their place in the UI tree. You can control when to preserve state and when to reset it between re-renders.
+State દરેક કોમ્પોનેન્ટ માટે અલગ હોય છે. React એ UI માં કોમ્પોનેન્ટ ક્યા સ્થાન પર છે તે મુજબ state ને જાળવી રાખે છે. તમે નક્કી કરી શકો છો કે ક્યારે state ને સાચવવું અને ક્યારે તે ફરીથી શરૂ કરવું.
 
 </Intro>
 
 <YouWillLearn>
 
-* When React chooses to preserve or reset the state
-* How to force React to reset component's state
-* How keys and types affect whether the state is preserved
+* React ક્યારે state ને સાચવવા અથવા ફરીથી સેટ કરવાનું પસંદ કરે છે.
+* React ને કેવી રીતે state ફરીથી સેટ કરવા માટે બળજબરી કરવી.
+* keys અને types state જાળવવામાં કેવી રીતે અસર કરે છે.
 
 </YouWillLearn>
 
-## State is tied to a position in the render tree {/*state-is-tied-to-a-position-in-the-tree*/}
+## State render tree માં એક નિશ્ચિત સ્થાન સાથે સંકળાયેલું હોય છે. {/*state-is-tied-to-a-position-in-the-tree*/}
 
-React builds [render trees](learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI.
+React તમારા UI માં કોમ્પોનેન્ટ માળખું માટે [render trees](learn/understanding-your-ui-as-a-tree#the-render-tree) બનાવે છે.
 
-When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the render tree.
+જ્યારે તમે કોમ્પોનેન્ટને state આપો છો, ત્યારે તમને એવું લાગશે કે state "કોમ્પોનેન્ટમાં" રહે છે. પરંતુ વાસ્તવમાં, state React દ્વારા જાળવવામાં આવે છે. React દરેક state ના ટુકડાને તે કયા કોમ્પોનેન્ટ સાથે સંકળાયેલું છે તે render tree માં તેના સ્થાન આધારે યોગ્ય કોમ્પોનેન્ટ સાથે જોડે છે.
 
-Here, there is only one `<Counter />` JSX tag, but it's rendered at two different positions:
+અહીં, ફક્ત એક `<Counter />` JSX ટૅગ છે, પરંતુ તે બે અલગ અલગ સ્થાનોએ રેન્ડર કરવામાં આવે છે:
 
 <Sandpack>
 
@@ -56,7 +56,7 @@ function Counter() {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        એક ઉમેરો
       </button>
     </div>
   );
@@ -86,11 +86,11 @@ label {
 
 </Sandpack>
 
-Here's how these look as a tree:    
+આ રીતે Tree બતાવે છે:   
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_tree" height={248} width={395} alt="Diagram of a tree of React components. The root node is labeled 'div' and has two children. Each of the children are labeled 'Counter' and both contain a state bubble labeled 'count' with value 0.">
+<Diagram name="preserving_state_tree" height={248} width={395} alt="Root node તરીકે 'div' છે, જેમાં બે children છે. દરેક child નું લેબલ 'Counter' છે અને બંનેમાં એક state bubble છે જેનું નામ 'count' છે અને તેની value 0 છે.">
 
 React tree
 
@@ -98,11 +98,11 @@ React tree
 
 </DiagramGroup>
 
-**These are two separate counters because each is rendered at its own position in the tree.** You don't usually have to think about these positions to use React, but it can be useful to understand how it works.
+**આ બે અલગ-અલગ counters છે કારણ કે દરેક પોતપોતાની સ્થિતી પર Tree માં દર્શાવવામાં આવે છે.** તમારે સામાન્ય રીતે React નો ઉપયોગ કરતા સમયે આ સ્થાનો અંગે વિચારવાની જરૂર નથી, પરંતુ તે કેવી રીતે કાર્ય કરે છે તે સમજવું ફાયદાકારક થઈ શકે છે.
 
-In React, each component on the screen has fully isolated state. For example, if you render two `Counter` components side by side, each of them will get its own, independent, `score` and `hover` states.
+React માં, સ્ક્રીન પર દરેક કોમ્પોનેન્ટનું પોતાનું અલગ state હોય છે. ઉદાહરણ તરીકે, જો તમે બાજુ બાજુ ૨ Counter કોમ્પોનેન્ટ્સ રેન્ડર કરો, તો દરેકને તેનું પોતાનું, સ્વતંત્ર, `score` અને `hover` state મળશે.
 
-Try clicking both counters and notice they don't affect each other:
+બન્ને counters પર ક્લિક કરવાનો પ્રયાસ કરો અને જુઓ કે તેઓ એકબીજાને અસર નથી કરતાં:
 
 <Sandpack>
 
@@ -135,7 +135,7 @@ function Counter() {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        એક ઉમેરો
       </button>
     </div>
   );
@@ -160,21 +160,21 @@ function Counter() {
 
 </Sandpack>
 
-As you can see, when one counter is updated, only the state for that component is updated:
+જેમ કે તમે જોઈ શકો છો, જ્યારે એક counter અપડેટ થાય છે, ત્યારે ફક્ત તે કોમ્પોનેન્ટ માટેનું state અપડેટ થાય છે:
 
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_increment" height={248} width={441} alt="Diagram of a tree of React components. The root node is labeled 'div' and has two children. The left child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The right child is labeled 'Counter' and contains a state bubble labeled 'count' with value 1. The state bubble of the right child is highlighted in yellow to indicate its value has updated.">
+<Diagram name="preserving_state_increment" height={248} width={441} alt="React ઘટકોના વૃક્ષનો આલેખ. Root Node 'div' તરીકે લેબલ કરેલું છે અને તેના બે સંતાનો છે. ડાબી બાજુનો સંતાન 'Counter' તરીકે લેબલ કરેલું છે અને તેમાં 'count' નામનું state બબલ છે જેની કિંમત 0 છે. જમણી બાજુનો સંતાન પણ 'Counter' તરીકે લેબલ કરેલું છે અને તેમાં 'count' નામનું state બબલ છે જેની કિંમત 1 છે. જમણું state બબલ પીળા રંગમાં હાઇલાઇટ કરેલું છે, જેથી તેની કિંમતમાં ફેરફાર દર્શાવવામાં આવે છે.">
 
-Updating state
+State અપડેટ કરવું.
 
 </Diagram>
 
 </DiagramGroup>
 
 
-React will keep the state around for as long as you render the same component at the same position in the tree. To see this, increment both counters, then remove the second component by unchecking "Render the second counter" checkbox, and then add it back by ticking it again:
+React state ને તે સમય સુધી જાળવે છે, જયાં સુધી તમે એ જ કોમ્પોનેન્ટને એ જ સ્થાન પર render કરતા રહો. આ જોવા માટે, બન્ને counters વધારવા, પછી "બીજું counter રેન્ડર કરો" checkbox ને અનચેક કરી બીજું કોમ્પોનેન્ટ દૂર કરો, અને પછી તેને ફરીથી ટિક કરીને ઉમેરો:
 
 <Sandpack>
 
@@ -195,7 +195,7 @@ export default function App() {
             setShowB(e.target.checked)
           }}
         />
-        Render the second counter
+        બીજું counter રેન્ડર કરો
       </label>
     </div>
   );
@@ -218,7 +218,7 @@ function Counter() {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+       એક ઉમેરો
       </button>
     </div>
   );
@@ -248,35 +248,34 @@ label {
 
 </Sandpack>
 
-Notice how the moment you stop rendering the second counter, its state disappears completely. That's because when React removes a component, it destroys its state.
+ધ્યાન દો, જ્યારે તમે બીજું counter render કરવાનું બંધ કરો છો, ત્યારે તેનો state પૂરેપૂરી રીતે નષ્ટ થઈ જાય છે. આ માટે કારણ એ છે કે જ્યારે React એક કોમ્પોનેન્ટને દૂર કરે છે, ત્યારે તેની state નષ્ટ થઈ જાય છે.
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_remove_component" height={253} width={422} alt="Diagram of a tree of React components. The root node is labeled 'div' and has two children. The left child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The right child is missing, and in its place is a yellow 'poof' image, highlighting the component being deleted from the tree.">
-
-Deleting a component
+<Diagram name="preserving_state_remove_component" height={253} width={422} alt="React components નું એક tree નું diagram. Root node 'div' થી labeled છે અને તેના બે children છે. ડાબા બચ્ચું 'Counter' થી labeled છે અને તેમાં એક state bubble છે જે 'count' થી labeled છે અને value 0 છે. દાયમું બચ્ચું ગાયબ છે, અને તેના સ્થાને પીળો 'poof' ચિત્ર છે, જે React component ના tree માંથી કાઢવામાં આવતા છબી બતાવે છે.">
+કોમ્પોનેન્ટ દૂર કરી રહ્યા છે
 
 </Diagram>
 
 </DiagramGroup>
 
-When you tick "Render the second counter", a second `Counter` and its state are initialized from scratch (`score = 0`) and added to the DOM.
+જ્યારે તમે "બીજું counter રેન્ડર કરો" ટીક કરો છો, ત્યારે બીજું `Counter` અને તેનું state નવી શરૃઆતથી (`score = 0`) આરંભ થાય છે અને DOM માં ઉમેરાય છે.
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_add_component" height={258} width={500} alt="Diagram of a tree of React components. The root node is labeled 'div' and has two children. The left child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The right child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The entire right child node is highlighted in yellow, indicating that it was just added to the tree.">
+<Diagram name="preserving_state_add_component" height={258} width={500} alt="React components નું એક tree નું diagram. Root node 'div' થી labeled છે અને તેના બે children છે. ડાબા બચ્ચું 'Counter' થી labeled છે અને તેમાં એક state bubble છે જે 'count' થી labeled છે અને value 0 છે. દાયમું બચ્ચું પણ 'Counter' થી labeled છે અને તેમાં એક state bubble છે જે 'count' થી labeled છે અને value 0 છે. આખા દાયમું બચ્ચા ના node ને પીળા રંગમાં હાઈલાઇટ કરવામાં આવ્યું છે, જે દર્શાવે છે કે તે તાજા એડ કરાયું છે.">
 
-Adding a component
+કોમ્પોનેન્ટ ઉમેરવું
 
 </Diagram>
 
 </DiagramGroup>
 
-**React preserves a component's state for as long as it's being rendered at its position in the UI tree.** If it gets removed, or a different component gets rendered at the same position, React discards its state.
+**React કંપોનેન્ટનું state ત્યાં સુધી રહે છે જ્યાં સુધી એ UI tree માં એક જ જગ્યા પર દેખાતું રહે છે.** જો તે દૂર કરવામાં આવે છે, અથવા એ જ સ્થાન પર બીજું કોમ્પોનેન્ટ રેન્ડર થાય છે, તો React તેની state ને નષ્ટ કરી દે છે.
 
-## Same component at the same position preserves state {/*same-component-at-the-same-position-preserves-state*/}
+## એજ કોમ્પોનેન્ટ એજ સ્થાન પર state જાળવે છે. {/*same-component-at-the-same-position-preserves-state*/}
 
-In this example, there are two different `<Counter />` tags:
+આ ઉદાહરણમાં, બે અલગ અલગ `<Counter />` ટૅગ્સ છે:
 
 <Sandpack>
 
@@ -300,7 +299,7 @@ export default function App() {
             setIsFancy(e.target.checked)
           }}
         />
-        Use fancy styling
+        fancy સ્ટાઈલિંગ ઉપયોગ કરો
       </label>
     </div>
   );
@@ -326,7 +325,7 @@ function Counter({ isFancy }) {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        એક ઉમેરો
       </button>
     </div>
   );
@@ -361,24 +360,24 @@ label {
 
 </Sandpack>
 
-When you tick or clear the checkbox, the counter state does not get reset. Whether `isFancy` is `true` or `false`, you always have a `<Counter />` as the first child of the `div` returned from the root `App` component:
+તમે checkbox ટીક કરો કે અનટીક, ત્યારે counter નું state રિસેટ થતું નથી. કેમ કે `isFancy` `true` હોય કે `false`, દર વખતે `<Counter />` `div` ના પહેલા ચાઈલ્ડ તરીકે જ હોય છે, જે root `App` કોમ્પોનેન્ટમાંથી પાછું અપાય છે:
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_same_component" height={461} width={600} alt="Diagram with two sections separated by an arrow transitioning between them. Each section contains a layout of components with a parent labeled 'App' containing a state bubble labeled isFancy. This component has one child labeled 'div', which leads to a prop bubble containing isFancy (highlighted in purple) passed down to the only child. The last child is labeled 'Counter' and contains a state bubble with label 'count' and value 3 in both diagrams. In the left section of the diagram, nothing is highlighted and the isFancy parent state value is false. In the right section of the diagram, the isFancy parent state value has changed to true and it is highlighted in yellow, and so is the props bubble below, which has also changed its isFancy value to true.">
+<Diagram name="preserving_state_same_component" height={461} width={600} alt="આ ડાયાગ્રામમાં બે વિભાગ છે, જેમને વચ્ચે તીરથી અલગ કરવામાં આવ્યા છે જે પરિવર્તન દર્શાવે છે. દરેક વિભાગમાં કોમ્પોનેન્ટ્સનો લેઆઉટ છે. પેરેન્ટ તરીકે 'App' લેબલ કરાયેલ છે જેમાં state બબલ છે – 'isFancy'. આ કોમ્પોનેન્ટમાં એક ચાઈલ્ડ છે 'div', જે prop બબલ તરફ જાય છે જેમાં 'isFancy' છે (જમણી બાજુના વિભાગમાં પર્પલ રંગથી હાઇલાઇટ થયેલું છે), અને જે નીચેના એકમાત્ર ચાઈલ્ડને આપવામાં આવ્યું છે. છેલ્લો ચાઈલ્ડ 'Counter' છે, જેમાં 'count' નામનું state બબલ છે અને બંને વિભાગોમાં તેની value 3 છે. ડાબા વિભાગમાં કંઈHighlighted નથી અને 'isFancy' ની value false છે. જમણા વિભાગમાં 'isFancy' ની value true થઈ છે અને તે પીળા રંગથી હાઇલાઇટ છે, તેમજ તે props બબલ પણ હાઇલાઇટ છે જેમાં હવે 'isFancy' true છે.">
 
-Updating the `App` state does not reset the `Counter` because `Counter` stays in the same position
+`App` નું state અપડેટ કરવાથી `Counter` રિસેટ થતો નથી કારણ કે `Counter` એ જ સ્થાન પર જ રહે છે."
 
 </Diagram>
 
 </DiagramGroup>
 
 
-It's the same component at the same position, so from React's perspective, it's the same counter.
+આ જ કોમ્પોનેન્ટ એ જ સ્થાન પર છે, એટલે React માટે એ જ counter ગણાય છે.
 
 <Pitfall>
 
-Remember that **it's the position in the UI tree--not in the JSX markup--that matters to React!** This component has two `return` clauses with different `<Counter />` JSX tags inside and outside the `if`:
+યાદ રાખો કે **React માટે મહત્વપૂર્ણ એ એ સ્થાન છે જે UI ટ્રીમાં છે -- JSX માર્કઅપમાં નહીં!** આ કોમ્પોનેન્ટમાં બે `return` વિભાગો છે, જેમાં અલગ અલગ `<Counter />` JSX ટૅગ્સ છે, એક `if`ની અંદર અને એક બહાર:
 
 <Sandpack>
 
@@ -399,7 +398,7 @@ export default function App() {
               setIsFancy(e.target.checked)
             }}
           />
-          Use fancy styling
+          fancy સ્ટાઈલિંગ ઉપયોગ કરો
         </label>
       </div>
     );
@@ -415,7 +414,7 @@ export default function App() {
             setIsFancy(e.target.checked)
           }}
         />
-        Use fancy styling
+        fancy સ્ટાઈલિંગ ઉપયોગ કરો
       </label>
     </div>
   );
@@ -441,7 +440,7 @@ function Counter({ isFancy }) {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        એક ઉમેરો
       </button>
     </div>
   );
@@ -476,15 +475,15 @@ label {
 
 </Sandpack>
 
-You might expect the state to reset when you tick checkbox, but it doesn't! This is because **both of these `<Counter />` tags are rendered at the same position.** React doesn't know where you place the conditions in your function. All it "sees" is the tree you return.
+તમને આશા હોઈ શકે છે કે state checkbox ટીક કરતા રિસેટ થશે, પરંતુ એ નહિ થાય! આ માટેનું કારણ એ છે કે ** બન્ને `<Counter />` ટૅગ્સ એ જ સ્થાન પર રેન્ડર થાય છે.** React એ જોઈ શકતું નથી કે તમે તમારી ફંક્શનમાં કયા સ્થાન પર શરતો મૂકો છો. તે ફક્ત તે વૃક્ષને "દેખે" છે જે તમે રિટર્ન કરો.
 
-In both cases, the `App` component returns a `<div>` with `<Counter />` as a first child. To React, these two counters have the same "address": the first child of the first child of the root. This is how React matches them up between the previous and next renders, regardless of how you structure your logic.
+બન્ને પરિસ્થિતિઓમાં, `App` કોમ્પોનેન્ટ `<div>` રિટર્ન કરે છે, જેમાં `<Counter />` પ્રથમ ચાઈલ્ડ તરીકે છે. React માટે, આ બંને counters એ જ "એડ્રેસ" ધરાવે છે: રુટના પ્રથમ ચાઈલ્ડના પ્રથમ ચાઈલ્ડ. આ રીતે React પેહલા અને બીજાં રેન્ડરો વચ્ચે તેમને મેળવે છે, ભલે તમે તમારી લોજિકને કેવી રીતે રચો.
 
 </Pitfall>
 
-## Different components at the same position reset state {/*different-components-at-the-same-position-reset-state*/}
+## વિભિન્ન કોમ્પોનેન્ટ્સ એ જ સ્થાન પર state રિસેટ કરે છે. {/*different-components-at-the-same-position-reset-state*/}
 
-In this example, ticking the checkbox will replace `<Counter>` with a `<p>`:
+આ ઉદાહરણમાં, checkbox ટીક કરતા `<Counter>` ને `<p>` દ્વારા બદલી દેવામાં આવશે:
 
 <Sandpack>
 
@@ -496,7 +495,7 @@ export default function App() {
   return (
     <div>
       {isPaused ? (
-        <p>See you later!</p> 
+        <p>પાછા મળશું</p> 
       ) : (
         <Counter /> 
       )}
@@ -508,7 +507,7 @@ export default function App() {
             setIsPaused(e.target.checked)
           }}
         />
-        Take a break
+        થોડો વિરામ લ્યો
       </label>
     </div>
   );
@@ -531,7 +530,7 @@ function Counter() {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        એક ઉમેરો
       </button>
     </div>
   );
@@ -561,13 +560,13 @@ label {
 
 </Sandpack>
 
-Here, you switch between _different_ component types at the same position. Initially, the first child of the `<div>` contained a `Counter`. But when you swapped in a `p`, React removed the `Counter` from the UI tree and destroyed its state.
+અહીં, તમે એ જ સ્થાન પર _વિભિન્ન_ કોમ્પોનેન્ટ પ્રકારો વચ્ચે સ્વિચ કરો છો. પ્રારંભમાં, `<div>`ના પ્રથમ ચાઈલ્ડમાં `Counter` હતો. પરંતુ જ્યારે તમે `p` સ્વેપ કર્યું, ત્યારે React એ UI ટ્રીમાંથી `Counter`ને હટાવી દીધી અને તેનું state નષ્ટ કરી દીધું.
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_diff_pt1" height={290} width={753} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'div' with a single child labeled 'Counter' containing a state bubble labeled 'count' with value 3. The middle section has the same 'div' parent, but the child component has now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'p', highlighted in yellow.">
+<Diagram name="preserving_state_diff_pt1" height={290} width={753} alt="ત્રણ વિભાગો સાથેનો ડાયાગ્રામ, દરેક વિભાગ વચ્ચે તીરથી પરિવર્તન દર્શાવતો છે. પહેલા વિભાગમાં એક React કોમ્પોનેન્ટ છે જેમાં 'div' લેબલ છે અને એક જ ચાઈલ્ડ છે જે 'Counter' તરીકે લેબલ છે, જેમાં 'count' નામક state બબલ છે અને તેની value 3 છે. મધ્યમ વિભાગમાં એ જ 'div' પેરેન્ટ છે, પરંતુ ચાઈલ્ડ કોમ્પોનેન્ટ હવે હટાવી દેવાયું છે, જે પીળા 'પ્રૂફ' ચિત્રથી દર્શાવાયું છે. ત્રીજા વિભાગમાં એ જ 'div' પેરેન્ટ છે, હવે નવી ચાઈલ્ડ છે જે 'p' તરીકે લેબલ છે, જે પીળા રંગથી હાઇલાઇટ થયેલું છે.">
 
-When `Counter` changes to `p`, the `Counter` is deleted and the `p` is added
+જ્યારે `Counter` ને `p` માં બદલી દેવામાં આવે છે, ત્યારે `Counter` હટાવી દેવામાં આવે છે અને `p` ઉમેરવામાં આવે છે.
 
 </Diagram>
 
@@ -575,15 +574,15 @@ When `Counter` changes to `p`, the `Counter` is deleted and the `p` is added
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_diff_pt2" height={290} width={753} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'p'. The middle section has the same 'div' parent, but the child component has now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'Counter' containing a state bubble labeled 'count' with value 0, highlighted in yellow.">
+<Diagram name="preserving_state_diff_pt2" height={290} width={753} alt="ત્રણ વિભાગો સાથેનો ડાયાગ્રામ, દરેક વિભાગ વચ્ચે તીરથી પરિવર્તન દર્શાવતો છે. પહેલા વિભાગમાં એક React કોમ્પોનેન્ટ છે જે 'p' તરીકે લેબલ છે. મધ્યમ વિભાગમાં એ જ 'div' પેરેન્ટ છે, પરંતુ ચાઈલ્ડ કોમ્પોનેન્ટ હવે હટાવી દેવામાં આવ્યું છે, જે પીળા 'પ્રૂફ' ચિત્રથી દર્શાવાયું છે. ત્રીજા વિભાગમાં એ જ 'div' પેરેન્ટ છે, હવે નવી ચાઈલ્ડ છે જે 'Counter' તરીકે લેબલ છે, જેમાં 'count' નામક state બબલ છે અને તેની value 0 છે, જે પીળા રંગથી હાઇલાઇટ થયેલું છે.">
 
-When switching back, the `p` is deleted and the `Counter` is added
+જ્યારે પાછો સ્વિચ કરવામાં આવે છે, ત્યારે `p` હટાવી દેવામાં આવે છે અને `Counter` ઉમેરવામાં આવે છે.
 
 </Diagram>
 
 </DiagramGroup>
 
-Also, **when you render a different component in the same position, it resets the state of its entire subtree.** To see how this works, increment the counter and then tick the checkbox:
+અને, **જ્યારે તમે એ જ સ્થાન પર અલગ કોમ્પોનેન્ટ રેન્ડર કરો છો, ત્યારે તે તેની સમગ્ર સબટ્રીનો state રિસેટ કરી નાખે છે.** આ કેવી રીતે કાર્ય કરે છે તે જોવા માટે, કાઉન્ટર_increment કરો અને પછી checkbox ટીક કરો:
 
 <Sandpack>
 
@@ -611,7 +610,7 @@ export default function App() {
             setIsFancy(e.target.checked)
           }}
         />
-        Use fancy styling
+        fancy સ્ટાઈલિંગ ઉપયોગ કરો
       </label>
     </div>
   );
@@ -637,7 +636,7 @@ function Counter({ isFancy }) {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        એક ઉમેરો
       </button>
     </div>
   );
@@ -672,13 +671,13 @@ label {
 
 </Sandpack>
 
-The counter state gets reset when you click the checkbox. Although you render a `Counter`, the first child of the `div` changes from a `div` to a `section`. When the child `div` was removed from the DOM, the whole tree below it (including the `Counter` and its state) was destroyed as well.
+જ્યારે તમે checkbox ક્લિક કરો છો, ત્યારે કાઉન્ટર state રિસેટ થાય છે. હાલમાં તમે `Counter` રેન્ડર કરો છો, પરંતુ `div`ના પ્રથમ ચાઈલ્ડમાંથી `div` ને `section`માં બદલી દેવામાં આવે છે. જ્યારે ચાઈલ્ડ `div` DOM માંથી હટાવાયું, ત્યારે તેની નીચેનો સંપૂર્ણ ટ્રી (જેમાં `Counter` અને તેનો state પણ શામેલ છે) નષ્ટ થઈ ગયો.
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_diff_same_pt1" height={350} width={794} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'div' with a single child labeled 'section', which has a single child labeled 'Counter' containing a state bubble labeled 'count' with value 3. The middle section has the same 'div' parent, but the child components have now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'div', highlighted in yellow, also with a new child labeled 'Counter' containing a state bubble labeled 'count' with value 0, all highlighted in yellow.">
+<Diagram name="preserving_state_diff_same_pt1" height={350} width={794} alt="ત્રણ વિભાગો સાથેનો ડાયાગ્રામ, દરેક વિભાગ વચ્ચે તીરથી પરિવર્તન દર્શાવતો છે. પહેલા વિભાગમાં એક React કોમ્પોનેન્ટ છે જે 'div' તરીકે લેબલ છે, જેમાં એક જ ચાઈલ્ડ છે જે 'section' તરીકે લેબલ છે, અને આ 'section'માં એક જ ચાઈલ્ડ છે જે 'Counter' તરીકે લેબલ છે, જેમાં 'count' નામક state બબલ છે અને તેની value 3 છે. મધ્યમ વિભાગમાં એ જ 'div' પેરેન્ટ છે, પરંતુ ચાઈલ્ડ કોમ્પોનેન્ટ હવે હટાવી દેવાયા છે, જે પીળા 'પ્રૂફ' ચિત્રથી દર્શાવાયું છે. ત્રીજા વિભાગમાં એ જ 'div' પેરેન્ટ છે, હવે નવી ચાઈલ્ડ છે જે 'div' તરીકે લેબલ છે, જે પીળા રંગથી હાઇલાઇટ થયેલું છે, અને તેમાં નવી ચાઈલ્ડ છે જે 'Counter' તરીકે લેબલ છે, જેમાં 'count' નામક state બબલ છે અને તેની value 0 છે, તમામ પીળા રંગથી હાઇલાઇટ થયેલા છે.">
 
-When `section` changes to `div`, the `section` is deleted and the new `div` is added
+જ્યારે `section` ને `div` માં બદલી દેવામાં આવે છે, ત્યારે `section` હટાવી દેવામાં આવે છે અને નવી `div` ઉમેરવામાં આવે છે.
 
 </Diagram>
 
@@ -686,21 +685,21 @@ When `section` changes to `div`, the `section` is deleted and the new `div` is a
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_diff_same_pt2" height={350} width={794} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'div' with a single child labeled 'div', which has a single child labeled 'Counter' containing a state bubble labeled 'count' with value 0. The middle section has the same 'div' parent, but the child components have now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'section', highlighted in yellow, also with a new child labeled 'Counter' containing a state bubble labeled 'count' with value 0, all highlighted in yellow.">
+<Diagram name="preserving_state_diff_same_pt2" height={350} width={794} alt="ત્રણ વિભાગો સાથેનો ડાયાગ્રામ, દરેક વિભાગ વચ્ચે તીરથી પરિવર્તન દર્શાવતો છે. પહેલા વિભાગમાં એક React કોમ્પોનેન્ટ છે જે 'div' તરીકે લેબલ છે, જેમાં એક જ ચાઈલ્ડ છે જે 'div' તરીકે લેબલ છે, અને આ 'div'માં એક જ ચાઈલ્ડ છે જે 'Counter' તરીકે લેબલ છે, જેમાં 'count' નામક state બબલ છે અને તેની value 0 છે. મધ્યમ વિભાગમાં એ જ 'div' પેરેન્ટ છે, પરંતુ ચાઈલ્ડ કોમ્પોનેન્ટ હવે હટાવી દેવાયા છે, જે પીળા 'પ્રૂફ' ચિત્રથી દર્શાવાયું છે. ત્રીજા વિભાગમાં એ જ 'div' પેરેન્ટ છે, હવે નવી ચાઈલ્ડ છે જે 'section' તરીકે લેબલ છે, જે પીળા રંગથી હાઇલાઇટ થયેલું છે, અને તેમાં નવી ચાઈલ્ડ છે જે 'Counter' તરીકે લેબલ છે, જેમાં 'count' નામક state બબલ છે અને તેની value 0 છે, તમામ પીળા રંગથી હાઇલાઇટ થયેલા છે.">
 
-When switching back, the `div` is deleted and the new `section` is added
+જ્યારે પાછો સ્વિચ કરવામાં આવે છે, ત્યારે `div` હટાવી દેવામાં આવે છે અને નવું `section` ઉમેરવામાં આવે છે.
 
 </Diagram>
 
 </DiagramGroup>
 
-As a rule of thumb, **if you want to preserve the state between re-renders, the structure of your tree needs to "match up"** from one render to another. If the structure is different, the state gets destroyed because React destroys state when it removes a component from the tree.
+સામાન્ય રીતે, **જો તમે રેન્ડર વચ્ચે state સાચવવા માંગતા હો, તો તમારા ટ્રીની માળખું એક રેન્ડરથી બીજામાં "મેચ" કરવું જોઈએ.** જો માળખું અલગ છે, તો state નષ્ટ થઈ જાય છે કારણકે React એ કોમ્પોનેન્ટને ટ્રીમાંથી હટાવતી વખતે state નષ્ટ કરે છે.
 
 <Pitfall>
 
-This is why you should not nest component function definitions.
+આ વાતનો અર્થ છે કે તમે કોમ્પોનેન્ટ ફંક્શનને અંદર ન લખો.
 
-Here, the `MyTextField` component function is defined *inside* `MyComponent`:
+અહીં, `MyTextField` કોમ્પોનેન્ટ ફંક્શન *MyComponent* ની અંદર લખાયું છે:
 
 <Sandpack>
 
@@ -726,7 +725,7 @@ export default function MyComponent() {
       <MyTextField />
       <button onClick={() => {
         setCounter(counter + 1)
-      }}>Clicked {counter} times</button>
+      }}>{counter} વખત ક્લિક કરેલું</button>
     </>
   );
 }
@@ -735,13 +734,13 @@ export default function MyComponent() {
 </Sandpack>
 
 
-Every time you click the button, the input state disappears! This is because a *different* `MyTextField` function is created for every render of `MyComponent`. You're rendering a *different* component in the same position, so React resets all state below. This leads to bugs and performance problems. To avoid this problem, **always declare component functions at the top level, and don't nest their definitions.**
+દરેક વખત તમે બટન પર ક્લિક કરો છો, ત્યારે ઇનપુટ state ગાયબ થઈ જાય છે! આ એ માટે છે કે દરેક રેન્ડર પર `MyTextField` ફંક્શન અલગ બનાવાયું છે. તમે એક જ જગ્યાએ *વિભિન્ન* કોમ્પોનેન્ટ રેન્ડર કરી રહ્યા છો, એટલે React બધા stateને રિસેટ કરે છે. આથી બગ્સ અને પર્ફોર્મન્સની સમસ્યાઓ આવે છે. આથી, **હંમેશા કોમ્પોનેન્ટ ફંક્શનને ઉપરના સ્તરે લખો અને તેને નેસ્ટ ન કરો.**
 
 </Pitfall>
 
-## Resetting state at the same position {/*resetting-state-at-the-same-position*/}
+## એજ સ્થાન પર state રિસેટ કરવો {/*resetting-state-at-the-same-position*/}
 
-By default, React preserves state of a component while it stays at the same position. Usually, this is exactly what you want, so it makes sense as the default behavior. But sometimes, you may want to reset a component's state. Consider this app that lets two players keep track of their scores during each turn:
+આપમેળે, React કોઈ component એજ સ્થાન પર રહે ત્યારે તેનું state સાચવી રાખે છે. સામાન્ય રીતે આપણે એવું જ ઇચ્છીએ છીએ, એટલે આ વર્તન યોગ્ય ગણાય છે. પણ ક્યારેક તમારે component નું state ફરીથી શરૂ કરવું હોય છે. આ ઉદાહરણ જુઓ જેમાં બે ખેલાડીઓ દરેક વારમાં પોતાનું સ્કોર નોંધે છે:
 
 <Sandpack>
 
@@ -760,7 +759,7 @@ export default function Scoreboard() {
       <button onClick={() => {
         setIsPlayerA(!isPlayerA);
       }}>
-        Next player!
+        આગલો ખેલાડી!
       </button>
     </div>
   );
@@ -783,7 +782,7 @@ function Counter({ person }) {
     >
       <h1>{person}'s score: {score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        એક ઉમેરો
       </button>
     </div>
   );
@@ -811,19 +810,19 @@ h1 {
 
 </Sandpack>
 
-Currently, when you change the player, the score is preserved. The two `Counter`s appear in the same position, so React sees them as *the same* `Counter` whose `person` prop has changed.
+હાલમાં, જયારે તમે ખેલાડી બદલો છો, ત્યારે સ્કોર જાળવાય છે. બંને `Counter` એ સમાન સ્થાન પર દર્શાય છે, એટલે React તેને *એક જ* `Counter` સમજે છે, જેના `person` પ્રોપમાં ફેરફાર થયો છે.
 
-But conceptually, in this app they should be two separate counters. They might appear in the same place in the UI, but one is a counter for Taylor, and another is a counter for Sarah.
+પરંતુ આ એપ્લિકેશનમાં, ખ્યાલમાં, તે બે અલગ-અલગ કાઉન્ટર હોવા જોઈએ. તે બંને UI માં એક જ જગ્યાએ દેખાય છે, પરંતુ એક ટેલર માટેનું કાઉન્ટર છે, અને બીજું સારાહ માટેનું કાઉન્ટર છે.
 
-There are two ways to reset state when switching between them:
+જ્યારે તમે બંને વચ્ચે બદલી કરો છો, ત્યારે state ને રીસેટ કરવા માટે બે રીતો છે:
 
-1. Render components in different positions
-2. Give each component an explicit identity with `key`
+1. કમ્પોનેન્ટ્સને અલગ સ્થાનોમાં રેન્ડર કરો
+2. પ્રત્યેક કોમ્પોનેન્ટને `key` સાથે સ્પષ્ટ ઓળખ આપો
 
 
-### Option 1: Rendering a component in different positions {/*option-1-rendering-a-component-in-different-positions*/}
+### વિકલ્પ 1: વિભિન્ન સ્થાનોએ કમ્પોનન્ટને રેન્ડર કરવું {/*option-1-rendering-a-component-in-different-positions*/}
 
-If you want these two `Counter`s to be independent, you can render them in two different positions:
+જો તમે આ બે `Counter`s ને સ્વતંત્ર રાખવા માંગતા હો, તો તમે તેમને બે અલગ અલગ સ્થાનોએ રેન્ડર કરી શકો છો:
 
 <Sandpack>
 
@@ -843,7 +842,7 @@ export default function Scoreboard() {
       <button onClick={() => {
         setIsPlayerA(!isPlayerA);
       }}>
-        Next player!
+        આગલો ખેલાડી!
       </button>
     </div>
   );
@@ -866,7 +865,7 @@ function Counter({ person }) {
     >
       <h1>{person}'s score: {score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        એક ઉમેરો
       </button>
     </div>
   );
@@ -894,42 +893,42 @@ h1 {
 
 </Sandpack>
 
-* Initially, `isPlayerA` is `true`. So the first position contains `Counter` state, and the second one is empty.
-* When you click the "Next player" button the first position clears but the second one now contains a `Counter`.
+* પ્રારંભિક રૂપે, `isPlayerA` એ `true` છે. તેથી પ્રથમ સ્થાનમાં `Counter` state છે, અને બીજું ખાલી છે.
+* Next player" બટન પર ક્લિક કરવાથી પ્રથમ પોઝિશન ખાલી થાય છે, પરંતુ બીજું પોઝિશન હવે Counter ધરાવશે.
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_diff_position_p1" height={375} width={504} alt="Diagram with a tree of React components. The parent is labeled 'Scoreboard' with a state bubble labeled isPlayerA with value 'true'. The only child, arranged to the left, is labeled Counter with a state bubble labeled 'count' and value 0. All of the left child is highlighted in yellow, indicating it was added.">
+<Diagram name="preserving_state_diff_position_p1" height={375} width={504} alt="React ઘટકોનો આકાર (ડાયાગ્રામ) બનાવો. પેરેન્ટને 'Scoreboard' તરીકે લેબલ કરો, જેમાં state બબલ 'isPlayerA' અને તેનું મૂલ્ય 'true' છે. એકમાત્ર ચાઈલ્ડ, જે ડાબી બાજુ પર છે, તે 'Counter' તરીકે લેબલ કરો, જેમાં state બબલ 'count' અને તેનું મૂલ્ય 0 છે. ડાબી બાજુના ચાઈલ્ડને પીળા રંગમાં હાઇલાઈટ કરો, આને એડ કરવામાં આવ્યું છે.">
 
-Initial state
+પ્રારંભિક state
 
 </Diagram>
 
-<Diagram name="preserving_state_diff_position_p2" height={375} width={504} alt="Diagram with a tree of React components. The parent is labeled 'Scoreboard' with a state bubble labeled isPlayerA with value 'false'. The state bubble is highlighted in yellow, indicating that it has changed. The left child is replaced with a yellow 'poof' image indicating that it has been deleted and there is a new child on the right, highlighted in yellow indicating that it was added. The new child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0.">
+<Diagram name="preserving_state_diff_position_p2" height={375} width={504} alt="React ઘટકોનો આકાર (ડાયાગ્રામ) બનાવો. પેરેન્ટને 'Scoreboard' તરીકે લેબલ કરો, જેમાં state બબલ 'isPlayerA' અને તેનો મૂલ્ય 'false' છે. state બબલને પીળા રંગમાં હાઇલાઈટ કરો, જે બતાવે છે કે તે બદલાયું છે. ડાબી બાજુનો ચાઈલ્ડ 'poof' ચિત્ર સાથે પીળા રંગમાં બદલાય છે, જે બતાવે છે કે તેને હટાવવામાં આવી છે, અને દાબી બાજુની જગ્યાએ નવા ચાઈલ્ડને ઉમેરવામાં આવ્યો છે, જે પીળા રંગમાં હાઇલાઈટ કરેલો છે. નવો ચાઈલ્ડ 'Counter' તરીકે લેબલ છે અને તેમાં state બબલ 'count' અને તેનું મૂલ્ય 0 છે.">
 
-Clicking "next"
+"નેક્સ્ટ" પર ક્લિક કરવું
 
 </Diagram>
 
-<Diagram name="preserving_state_diff_position_p3" height={375} width={504} alt="Diagram with a tree of React components. The parent is labeled 'Scoreboard' with a state bubble labeled isPlayerA with value 'true'. The state bubble is highlighted in yellow, indicating that it has changed. There is a new child on the left, highlighted in yellow indicating that it was added. The new child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The right child is replaced with a yellow 'poof' image indicating that it has been deleted.">
+<Diagram name="preserving_state_diff_position_p3" height={375} width={504} alt="React ઘટકોનું એક આકૃતિ જેમાં વૃક્ષ છે. પેરેન્ટને 'સ્કોરબોર્ડ' તરીકે લેબલ કરવામા આવે છે, જેમાં 'isPlayerA' નામક સ્ટેટ બબલ છે જેનો મૂલ્ય 'true' છે. આ સ્ટેટ બબલને પીળા રંગમાં હાઇલાઇટ કરવામા આવે છે, જે બતાવે છે કે તે બદલાયું છે. ડાબી બાજુ પર એક નવું ચાઇલ ઉમેરવામાં આવે છે, જે પીળા રંગમાં હાઇલાઇટ કરવામા આવે છે, જે બતાવે છે કે તે ઉમેરાયું છે. આ નવું ચાઇલ 'કાઉન્ટર' તરીકે લેબલ કરવામા આવે છે અને તેમાં 'count' નામક સ્ટેટ બબલ છે, જેનો મૂલ્ય 0 છે. જમણી બાજુનો ચાઇલ પીળા 'poof' ચિત્ર સાથે બદલાવ માટે પ્રદર્શિત થાય છે, જે દર્શાવે છે કે તે ડિલીટ કરાયો છે.">
 
-Clicking "next" again
+ફરીથી "નેક્સ્ટ" પર ક્લિક કરવું
 
 </Diagram>
 
 </DiagramGroup>
 
-Each `Counter`'s state gets destroyed each time it's removed from the DOM. This is why they reset every time you click the button.
+દરેક `Counter` ની state ત્યારે નષ્ટ થાય છે જ્યારે તેને DOM માંથી દૂર કરવામાં આવે છે. એટલે દરેક વખતે જ્યારે તમે બટન ક્લિક કરો છો, ત્યારે તે રિસેટ થઈ જાય છે.
 
-This solution is convenient when you only have a few independent components rendered in the same place. In this example, you only have two, so it's not a hassle to render both separately in the JSX.
+જ્યારે તમારાં પાસે થોડાં જ સ્વતંત્ર component હોય અને તેઓને એ જ જગ્યાએ રેન્ડર કરવાનાં હોય, ત્યારે આ ઉકેલ અનુકૂળ છે. આ ઉદાહરણમાં, તમારાં પાસે ફક્ત બે છે, એટલે JSX માં બંનેને અલગથી રેન્ડર કરવું મુશ્કેલ નથી.
 
-### Option 2: Resetting state with a key {/*option-2-resetting-state-with-a-key*/}
+### વિકલ્પ 2: key દ્વારા state રિસેટ કરવી {/*option-2-resetting-state-with-a-key*/}
 
-There is also another, more generic, way to reset a component's state.
+કોઈ component ની state રિસેટ કરવાની એક બીજી, વધુ સામાન્ય રીત પણ છે.
 
-You might have seen `key`s when [rendering lists.](/learn/rendering-lists#keeping-list-items-in-order-with-key) Keys aren't just for lists! You can use keys to make React distinguish between any components. By default, React uses order within the parent ("first counter", "second counter") to discern between components. But keys let you tell React that this is not just a *first* counter, or a *second* counter, but a specific counter--for example, *Taylor's* counter. This way, React will know *Taylor's* counter wherever it appears in the tree!
+તમે કદાચ ત્યારે `key`s જોયા હશે જ્યારે [સૂચિ રેન્ડર](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key) કરતાં હોય. Keys ફક્ત લિસ્ટ માટે જ નથી! તમે React ને કોઇપણ component વચ્ચે ફરક પાડવામાં મદદ કરવા માટે પણ keys નો ઉપયોગ કરી શકો છો. મૂળરૂપે, React પેરેન્ટની અંદરનો ઓર્ડર ("પ્રથમ કાઉન્ટર", "બીજું કાઉન્ટર") પરથી component વચ્ચે ભેદ કરતું હોય છે. પરંતુ keys દ્વારા તમે React ને કહી શકો છો કે આ ફક્ત *પ્રથમ* કે બીજું* કાઉન્ટર નથી, પણ એક નિર્ધારિત કાઉન્ટર છે—જેમ કે *ટેલરનું* કાઉન્ટર. આ રીતે, React ને જ્યાં પણ *ટેલરનું* કાઉન્ટર ટ્રીમાં દેખાશે ત્યાં ખબર પડશે કે એ કાઉન્ટર એનું છે!
 
-In this example, the two `<Counter />`s don't share state even though they appear in the same place in JSX:
+આ ઉદાહરણમાં, બંને `<Counter />`s એ જ જગ્યાએ JSX માં દેખાતા હોવા છતાં, તેઓ state શેર નથી કરતા:
 
 <Sandpack>
 
@@ -948,7 +947,7 @@ export default function Scoreboard() {
       <button onClick={() => {
         setIsPlayerA(!isPlayerA);
       }}>
-        Next player!
+        આગલો ખેલાડી!
       </button>
     </div>
   );
@@ -971,7 +970,7 @@ function Counter({ person }) {
     >
       <h1>{person}'s score: {score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        એક ઉમેરો
       </button>
     </div>
   );
@@ -999,7 +998,7 @@ h1 {
 
 </Sandpack>
 
-Switching between Taylor and Sarah does not preserve the state. This is because **you gave them different `key`s:**
+ટેલર અને સારાહ વચ્ચે બદલવાથી state સંગ્રહિત રહેતી નથી. કારણ: તમે બંનેને અલગ-અલગ key અપાવ્યા છે.
 
 ```js
 {isPlayerA ? (
@@ -1009,19 +1008,19 @@ Switching between Taylor and Sarah does not preserve the state. This is because
 )}
 ```
 
-Specifying a `key` tells React to use the `key` itself as part of the position, instead of their order within the parent. This is why, even though you render them in the same place in JSX, React sees them as two different counters, and so they will never share state. Every time a counter appears on the screen, its state is created. Every time it is removed, its state is destroyed. Toggling between them resets their state over and over.
+`key` સ્પષ્ટ કરવાથી React ને જણાવવામાં આવે છે કે તે પોઝિશન માટે તેમના ઓર્ડરની બદલે `key` જાતે જ વાપરે. એટલે કે, તમે JSX માં એ જ જગ્યાએ તેમને રેન્ડર કરો છતાં પણ, React તેમને બે જુદા કાઉન્ટર તરીકે જુએ છે, તેથી તેઓ ક્યારેય state શેર નથી કરતા. દરેક વખતે જ્યારે કાઉન્ટર સ્ક્રીન પર આવે છે, ત્યારે તેની state બનાવવામાં આવે છે. જ્યારે તે દૂર થાય છે, ત્યારે તેની state નષ્ટ થાય છે. તેમનાં વચ્ચે ટૉગલ કરવાથી state વારંવાર રિસેટ થાય છે.
 
 <Note>
 
-Remember that keys are not globally unique. They only specify the position *within the parent*.
+ધ્યાન રાખો કે keys વૈશ્વિક રીતે અનન્ય હોતી નથી. તે માત્ર _પેરેન્ટની અંદર પોઝિશન_ દર્શાવે છે.
 
 </Note>
 
-### Resetting a form with a key {/*resetting-a-form-with-a-key*/}
+### ફોર્મને key દ્વારા રિસેટ કરવું {/*resetting-a-form-with-a-key*/}
 
-Resetting state with a key is particularly useful when dealing with forms.
+ફોર્મ સાથે કામ કરતાં વખતે key દ્વારા state રિસેટ કરવું ખાસ કરીને ઉપયોગી છે.
 
-In this chat app, the `<Chat>` component contains the text input state:
+આ ચેટ એપમાં, `<Chat>` component માં ટેક્સ્ટ ઇનપુટ state સામેલ છે:
 
 <Sandpack>
 
@@ -1088,7 +1087,7 @@ export default function Chat({ contact }) {
         onChange={e => setText(e.target.value)}
       />
       <br />
-      <button>Send to {contact.email}</button>
+      <button>{contact.email} ને મોકલવું</button>
     </section>
   );
 }
@@ -1116,17 +1115,17 @@ textarea {
 
 </Sandpack>
 
-Try entering something into the input, and then press "Alice" or "Bob" to choose a different recipient. You will notice that the input state is preserved because the `<Chat>` is rendered at the same position in the tree.
+ઇનપુટમાં કંઈક દાખલ કરવાનો પ્રયાસ કરો, અને પછી "Alice" અથવા "Bob" પર ક્લિક કરો કે બીજું રિસિપિઅન્ટ પસંદ કરો. તમે નોટિસ કરશો કે ઇનપુટ state સચવાય રાખવામાં આવે છે કારણ કે `<Chat>` એ ટ્રીમાં એ જ સ્થાન પર રેન્ડર થાય છે.
 
-**In many apps, this may be the desired behavior, but not in a chat app!** You don't want to let the user send a message they already typed to a wrong person due to an accidental click. To fix it, add a `key`:
+**ઘણા એપ્સમાં, આ યોગ્ય વર્તન હોઈ શકે છે, પરંતુ ચેટ એપમાં નહીં!** તમે નહીં ઈચ્છો કે વપરાશકર્તાએ ખોટા વ્યક્તિને પહેલેથી લખેલો સંદેશો ભૂલથી મોકલવો. આને ઠીક કરવા માટે, એક `key` ઉમેરો:
 
 ```js
 <Chat key={to.id} contact={to} />
 ```
 
-This ensures that when you select a different recipient, the `Chat` component will be recreated from scratch, including any state in the tree below it. React will also re-create the DOM elements instead of reusing them.
+આ સુનિશ્ચિત કરે છે કે જ્યારે તમે અલગ રિસિપિઅન્ટ પસંદ કરો, ત્યારે `Chat` component નવી રીતે ફરીથી બનાવાશે, જેમાં નીચેના તમામ state સહિત. React DOM elements ને ફરીથી બનાવશે, reused કરવાની જગ્યાએ.
 
-Now switching the recipient always clears the text field:
+હવે, recipient બદલતા જ ટેક્સ્ટ ફિલ્ડ સાફ થઈ જાય છે:
 
 <Sandpack>
 
@@ -1193,7 +1192,7 @@ export default function Chat({ contact }) {
         onChange={e => setText(e.target.value)}
       />
       <br />
-      <button>Send to {contact.email}</button>
+      <button>{contact.email} ને મોકલવું</button>
     </section>
   );
 }
@@ -1223,24 +1222,25 @@ textarea {
 
 <DeepDive>
 
-#### Preserving state for removed components {/*preserving-state-for-removed-components*/}
+#### હટાવેલા components માટે state જાળવવું {/*preserving-state-for-removed-components*/}
 
-In a real chat app, you'd probably want to recover the input state when the user selects the previous recipient again. There are a few ways to keep the state "alive" for a component that's no longer visible:
+એક વાસ્તવિક ચેટ એપમાં, તમે કદાચ ઇચ્છો કે જ્યારે વપરાશકર્તા પાછો અગાઉનો રિસિપિઅન્ટ પસંદ કરે, ત્યારે ઇનપુટ state પુનઃપ્રાપ્તિ થાય. એક component જે હવે દેખાતું નથી, તેની state "જીવંત" રાખવા માટે કેટલાક રસ્તા છે:
 
-- You could render _all_ chats instead of just the current one, but hide all the others with CSS. The chats would not get removed from the tree, so their local state would be preserved. This solution works great for simple UIs. But it can get very slow if the hidden trees are large and contain a lot of DOM nodes.
-- You could [lift the state up](/learn/sharing-state-between-components) and hold the pending message for each recipient in the parent component. This way, when the child components get removed, it doesn't matter, because it's the parent that keeps the important information. This is the most common solution.
-- You might also use a different source in addition to React state. For example, you probably want a message draft to persist even if the user accidentally closes the page. To implement this, you could have the `Chat` component initialize its state by reading from the [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), and save the drafts there too.
+- તમે ફક્ત વર્તમાન ચેટની જગ્યાએ _બધા_ ચેટ રેન્ડર કરી શકો છો, પરંતુ બાકીના બધા ચેટને CSS દ્વારા છુપાવી શકો છો. આ રીતે, ચેટ ટ્રીમાંથી દૂર નહીં થાય, એટલે તેમની સ્થાનિક state સચવાઈ રહેશે. આ ઉકેલ સરળ UIs માટે ઉત્તમ છે. પરંતુ, જો છુપાયેલા ટ્રી મોટા હોય અને તેમાં ઘણા DOM નોડ્સ હોય, તો આ ધીમી હોઈ શકે છે.
+- તમે [state ને ઉપર લાવી શકો છો](/learn/sharing-state-between-components) અને દરેક રિસિપિઅન્ટ માટે પેન્ડિંગ સંદેશો પેરેન્ટ component માં રાખી શકો છો. આ રીતે, જ્યારે ચાઈલ્ડ components દૂર થાય છે, ત્યારે કંઈક ફેરફાર નહીં આવે, કેમ કે મહત્વપૂર્ણ માહિતી પેરેન્ટ પાસે રહેશે. આ સૌથી સામાન્ય ઉકેલ છે.
+- તમે React state સિવાય બીજી સંસ્થા પણ ઉપયોગ કરી શકો છો. ઉદાહરણ તરીકે, તમે કદાચ ઇચ્છો કે સંદેશોનો ડ્રાફ્ટ વપરાશકર્તા ભૂલથી પાનું બંધ કરે ત્યારે પણ જાળવાતો રહે. આને અમલમાં મૂકવા માટે, તમે `Chat` component ના state ને [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) માંથી વાંચીને આરંભ કરી શકો છો, અને ડ્રાફ્ટ્સને ત્યાં પણ સંગ્રહ કરી શકો છો.
 
-No matter which strategy you pick, a chat _with Alice_ is conceptually distinct from a chat _with Bob_, so it makes sense to give a `key` to the `<Chat>` tree based on the current recipient.
+જેવી રીતે તમે કોઈ પણ રીત પસંદ કરો, _Alice સાથે_ ચેટ અને _Bob સાથે_ ચેટ પરિપ્રેક્ષ્યમાં અલગ છે, એટલે આ પ્રમાણે પસંદગીના recipient પર આધાર રાખીને `<Chat>` ટ્રીને `key` આપવી અર્થપૂર્ણ છે.
 
 </DeepDive>
 
 <Recap>
 
-- React keeps state for as long as the same component is rendered at the same position.
-- State is not kept in JSX tags. It's associated with the tree position in which you put that JSX.
-- You can force a subtree to reset its state by giving it a different key.
-- Don't nest component definitions, or you'll reset state by accident.
+- React state એજ પ્રકારના component ને સચવી રાખે છે, જ્યાં તે એ જ સ્થાન પર રેન્ડર થાય છે.
+- State JSX ટૅગ્સમાં સચવાતી નથી. તે તે ટ્રી પોઝિશન સાથે જોડાયેલું છે જ્યાં તમે JSX મૂક્યા છે.
+- તમે subtree ને નવા `key` આપીને તેની state ફરીથી સેટ કરાવી શકો છો.
+- component નિર્ધારણને nesting ન કરો, નહીંતર તમે ભૂલથી state રિસેટ કરી શકશો.
+
 
 </Recap>
 
@@ -1248,9 +1248,9 @@ No matter which strategy you pick, a chat _with Alice_ is conceptually distinct
 
 <Challenges>
 
-#### Fix disappearing input text {/*fix-disappearing-input-text*/}
+#### ગાયબ થતા ઇનપુટ ટેક્સ્ટને ઠીક કરો {/*fix-disappearing-input-text*/}
 
-This example shows a message when you press the button. However, pressing the button also accidentally resets the input. Why does this happen? Fix it so that pressing the button does not reset the input text.
+આ ઉદાહરણમાં, બટન પર ક્લિક કરવાથી એક સંદેશો બતાવે છે. પરંતુ, બટન પર ક્લિક કરવાથી ઇનપુટ પણ ભૂલથી રિસેટ થઈ જાય છે. આ કેમ થાય છે? આને ઠીક કરો જેથી બટન પર ક્લિક કરવાથી ઇનપુટ ટેક્સ્ટ રિસેટ ન થાય.
 
 <Sandpack>
 
@@ -1262,11 +1262,11 @@ export default function App() {
   if (showHint) {
     return (
       <div>
-        <p><i>Hint: Your favorite city?</i></p>
+        <p><i>સંકેત: તમારું પ્રિય શહેર કયું છે?</i></p>
         <Form />
         <button onClick={() => {
           setShowHint(false);
-        }}>Hide hint</button>
+        }}>સંકેત છુપાવો</button>
       </div>
     );
   }
@@ -1275,7 +1275,7 @@ export default function App() {
       <Form />
       <button onClick={() => {
         setShowHint(true);
-      }}>Show hint</button>
+      }}>સંકેત બતાવો</button>
     </div>
   );
 }
@@ -1299,9 +1299,9 @@ textarea { display: block; margin: 10px 0; }
 
 <Solution>
 
-The problem is that `Form` is rendered in different positions. In the `if` branch, it is the second child of the `<div>`, but in the `else` branch, it is the first child. Therefore, the component type in each position changes. The first position changes between holding a `p` and a `Form`, while the second position changes between holding a `Form` and a `button`. React resets the state every time the component type changes.
+સમસ્યા એ છે કે `Form` અલગ-અલગ સ્થાનો પર રેન્ડર થાય છે. `if` શાખામાં, તે `<div>`નો બીજો ચાઈલ્ડ છે, પરંતુ `else` શાખામાં, તે પ્રથમ ચાઈલ્ડ છે. તેથી, દરેક પોઝિશનમાં component નો પ્રકાર બદલાય છે. પ્રથમ પોઝિશન `p` અને `Form` વચ્ચે બદલાય છે, જ્યારે બીજું પોઝિશન `Form` અને `button` વચ્ચે બદલાય છે. React દરેક વખતે component નો પ્રકાર બદલાતા જ state રિસેટ કરી દે છે.
 
-The easiest solution is to unify the branches so that `Form` always renders in the same position:
+સૌથી સરળ ઉકેલ એ છે કે શાખાઓને એકરૂપ બનાવવી, જેથી `Form` હંમેશા એ જ સ્થાન પર રેન્ડર થાય છે:
 
 <Sandpack>
 
@@ -1313,17 +1313,17 @@ export default function App() {
   return (
     <div>
       {showHint &&
-        <p><i>Hint: Your favorite city?</i></p>
+        <p><i>સંકેત: તમારું પ્રિય શહેર કયું છે?</i></p>
       }
       <Form />
       {showHint ? (
         <button onClick={() => {
           setShowHint(false);
-        }}>Hide hint</button>
+        }}>સંકેત છુપાવો</button>
       ) : (
         <button onClick={() => {
           setShowHint(true);
-        }}>Show hint</button>
+        }}>સંકેત બતાવો</button>
       )}
     </div>
   );
@@ -1347,7 +1347,7 @@ textarea { display: block; margin: 10px 0; }
 </Sandpack>
 
 
-Technically, you could also add `null` before `<Form />` in the `else` branch to match the `if` branch structure:
+ટેકનિકલી, તમે `else` શાખામાં `<Form />` પહેલા `null` પણ ઉમેરીને `if` શાખાની રચના સાથે મેળ કરી શકો છો:
 
 <Sandpack>
 
@@ -1359,11 +1359,11 @@ export default function App() {
   if (showHint) {
     return (
       <div>
-        <p><i>Hint: Your favorite city?</i></p>
+        <p><i>સંકેત: તમારું પ્રિય શહેર કયું છે?</i></p>
         <Form />
         <button onClick={() => {
           setShowHint(false);
-        }}>Hide hint</button>
+        }}>સંકેત છુપાવો</button>
       </div>
     );
   }
@@ -1373,7 +1373,7 @@ export default function App() {
       <Form />
       <button onClick={() => {
         setShowHint(true);
-      }}>Show hint</button>
+      }}>સંકેત બતાવો</button>
     </div>
   );
 }
@@ -1395,19 +1395,19 @@ textarea { display: block; margin: 10px 0; }
 
 </Sandpack>
 
-This way, `Form` is always the second child, so it stays in the same position and keeps its state. But this approach is much less obvious and introduces a risk that someone else will remove that `null`.
+આ રીતે, `Form` હંમેશા બીજો ચાઈલ્ડ રહે છે, તેથી તે એ જ સ્થાન પર રહે છે અને તેની state જાળવે છે. પરંતુ આ પદ્ધતિ વધારે સ્પષ્ટ નથી અને એમાં એ ખતરો છે કે બીજું વ્યક્તિ એ `null` હટાવી શકે.
 
 </Solution>
 
-#### Swap two form fields {/*swap-two-form-fields*/}
+#### બે ફોર્મ ફીલ્ડસનું સ્થાન બદલો {/*swap-two-form-fields*/}
 
-This form lets you enter first and last name. It also has a checkbox controlling which field goes first. When you tick the checkbox, the "Last name" field will appear before the "First name" field.
+આ ફોર્મ તમને પ્રથમ અને છેલ્લું નામ દાખલ કરવા દે છે. તેમાં એક ચેકબોક્સ પણ છે જે નક્કી કરે છે કયું ફીલ્ડ પહેલું આવશે. જ્યારે તમે ચેકબોક્સ પર ટિક્ક કરે છો, ત્યારે "છેલ્લું નામ" ફીલ્ડ "પ્રથમ નામ" ફીલ્ડ કરતાં પહેલા દેખાવા લાગે છે.
 
-It almost works, but there is a bug. If you fill in the "First name" input and tick the checkbox, the text will stay in the first input (which is now "Last name"). Fix it so that the input text *also* moves when you reverse the order.
+આ લગભગ કામ કરે છે, પરંતુ એક બગ છે. જો તમે "પ્રથમ નામ" ઇનપુટ ભરો અને ચેકબોક્સ પર ટિક કરો, તો લખાણ "પ્રથમ નામ" ઇનપુટમાં જ રહી જાય છે (જે હવે "છેલ્લું નામ" છે). તેને ઠીક કરો જેથી લખાણ પણ ખસે જ્યારે તમે ક્રમ બદલો.
 
 <Hint>
 
-It seems like for these fields, their position within the parent is not enough. Is there some way to tell React how to match up the state between re-renders?
+એવું લાગે છે કે આ ફીલ્ડ્સ માટે, પેરેન્ટમાં તેમની પોઝિશન પૂરતી નથી. શું કોઈ એવી રીત છે જે React ને બતાવે છે કે રિ-રેન્ડર વખતે state ને કેવી રીતે મેળ પાડવું?
 
 </Hint>
 
@@ -1425,7 +1425,8 @@ export default function App() {
         checked={reverse}
         onChange={e => setReverse(e.target.checked)}
       />
-      Reverse order
+      ક્રમ બદલવો
+
     </label>
   );
   if (reverse) {
@@ -1471,7 +1472,7 @@ label { display: block; margin: 10px 0; }
 
 <Solution>
 
-Give a `key` to both `<Field>` components in both `if` and `else` branches. This tells React how to "match up" the correct state for either `<Field>` even if their order within the parent changes:
+દોસ્તો `<Field>` components ને બંને `if` અને `else` શાખાઓમાં `key` આપો. આ React ને બતાવે છે કે પેરેન્ટમાં તેમનો ક્રમ બદલાતા હોવા છતાં, કેવી રીતે યોગ્ય state "મેળ પાડવી".
 
 <Sandpack>
 
@@ -1487,7 +1488,8 @@ export default function App() {
         checked={reverse}
         onChange={e => setReverse(e.target.checked)}
       />
-      Reverse order
+      ક્રમ બદલવો
+
     </label>
   );
   if (reverse) {
@@ -1533,11 +1535,11 @@ label { display: block; margin: 10px 0; }
 
 </Solution>
 
-#### Reset a detail form {/*reset-a-detail-form*/}
+#### વિગત ફોર્મ પુનઃસેટ કરો {/*reset-a-detail-form*/}
 
-This is an editable contact list. You can edit the selected contact's details and then either press "Save" to update it, or "Reset" to undo your changes.
+આ એડિટ કરી શકાય તેવુ કોન્ટેક્ટ લિસ્ટ છે. તમે પસંદ કરેલા કોન્ટેક્ટની વિગત એડિટ કરી શકો છો અને પછી "સેવ" દબાવીને તેને અપડેટ કરી શકો છો, અથવા "રિસેટ" દબાવીને તમારા ફેરફારો કરી શકો છો.
 
-When you select a different contact (for example, Alice), the state updates but the form keeps showing the previous contact's details. Fix it so that the form gets reset when the selected contact changes.
+જ્યારે તમે બીજું કોન્ટેક્ટ પસંદ કરો (ઉદાહરણ તરીકે, એલીસ), ત્યારે સ્ટેટ અપડેટ થાય છે પરંતુ ફોર્મ અગાઉના કોન્ટેક્ટની વિગત બતાવતું રહે છે. આને ઠીક કરો જેથી જ્યારે પસંદ કરેલું કોન્ટેક્ટ બદલાય, ત્યારે ફોર્મ પુનઃસેટ થાય.
 
 <Sandpack>
 
@@ -1652,13 +1654,13 @@ export default function EditContact({ initialData, onSave }) {
         };
         onSave(updatedData);
       }}>
-        Save
+        સેવ
       </button>
       <button onClick={() => {
         setName(initialData.name);
         setEmail(initialData.email);
       }}>
-        Reset
+        રિસેટ
       </button>
     </section>
   );
@@ -1689,7 +1691,7 @@ button {
 
 <Solution>
 
-Give `key={selectedId}` to the `EditContact` component. This way, switching between different contacts will reset the form:
+`EditContact` કોમ્પોનેન્ટને `key={selectedId}` આપો. આ રીતે, વિવિધ કોન્ટેક્ટ્સ વચ્ચે સ્વિચ કરવાથી ફોર્મ પુનઃસેટ થશે.
 
 <Sandpack>
 
@@ -1805,13 +1807,13 @@ export default function EditContact({ initialData, onSave }) {
         };
         onSave(updatedData);
       }}>
-        Save
+        સેવ
       </button>
       <button onClick={() => {
         setName(initialData.name);
         setEmail(initialData.email);
       }}>
-        Reset
+        રિસેટ
       </button>
     </section>
   );
@@ -1842,13 +1844,13 @@ button {
 
 </Solution>
 
-#### Clear an image while it's loading {/*clear-an-image-while-its-loading*/}
+#### ઇમેજ લોડ થતી વખતે તેને હટાવો {/*clear-an-image-while-its-loading*/}
 
-When you press "Next", the browser starts loading the next image. However, because it's displayed in the same `<img>` tag, by default you would still see the previous image until the next one loads. This may be undesirable if it's important for the text to always match the image. Change it so that the moment you press "Next", the previous image immediately clears.
+જ્યારે તમે "નેક્સ્ટ" પર ક્લિક કરો, બ્રાઉઝર નવી છબી લોડ કરવાનું શરૂ કરે છે. પરંતુ, કારણ કે તે એ જ `<img>` ટેગમાં બતાવવામાં આવે છે, પહેલાંની છબી નવા લોડ થવા સુધી દેખાતી રહે છે. જો છબી અને ટેક્સ્ટ એકજ રહેવું જરૂરી છે, તો આ નકળી હોઈ શકે છે. આને એ રીતે બદલો કે "નેક્સ્ટ" પર ક્લિક કરતાં પહેલાં, જૂની છબી તરત જ દૂર થઈ જાય.
 
 <Hint>
 
-Is there a way to tell React to re-create the DOM instead of reusing it?
+શું એવી કોઈ રીત છે જેને React ને DOM ને ફરીથી બનાવવા માટે કહીએ, એના બદલે કે તે તેનો ઉપયોગ ફરીથી કરે?
 
 </Hint>
 
@@ -1873,10 +1875,10 @@ export default function Gallery() {
   return (
     <>
       <button onClick={handleClick}>
-        Next
+        આગળ
       </button>
       <h3>
-        Image {index + 1} of {images.length}
+        છબી {index + 1} of {images.length}
       </h3>
       <img src={image.src} />
       <p>
@@ -1918,7 +1920,7 @@ img { width: 150px; height: 150px; }
 
 <Solution>
 
-You can provide a `key` to the `<img>` tag. When that `key` changes, React will re-create the `<img>` DOM node from scratch. This causes a brief flash when each image loads, so it's not something you'd want to do for every image in your app. But it makes sense if you want to ensure the image always matches the text.
+તમે `<img>` ટેગને `key` આપી શકો છો. જયારે તે `key` બદલાય છે, React એ `<img>` DOM નોડને ફરીથી બનાવશે. આ દરેક છબી લોડ થાય ત્યારે એક સંક્ષિપ્ત ફ્લેશ ઊભો કરે છે, તેથી આ તમારા એપમાં દરેક છબી માટે કરવું યોગ્ય નહીં હોય. પરંતુ આ ત્યારે યોગ્ય છે જ્યારે તમે ખાતરી કરવા માંગતા હો કે છબી હંમેશા ટેક્સ્ટ સાથે મેળ ખાય છે.
 
 <Sandpack>
 
@@ -1941,10 +1943,10 @@ export default function Gallery() {
   return (
     <>
       <button onClick={handleClick}>
-        Next
+        આગળ
       </button>
       <h3>
-        Image {index + 1} of {images.length}
+        છબી {index + 1} of {images.length}
       </h3>
       <img key={image.src} src={image.src} />
       <p>
@@ -1986,11 +1988,13 @@ img { width: 150px; height: 150px; }
 
 </Solution>
 
-#### Fix misplaced state in the list {/*fix-misplaced-state-in-the-list*/}
+#### લિસ્ટમાં ખોટી જગ્યાએ રહેલી state ઠીક કરો {/*fix-misplaced-state-in-the-list*/}
 
-In this list, each `Contact` has state that determines whether "Show email" has been pressed for it. Press "Show email" for Alice, and then tick the "Show in reverse order" checkbox. You will notice that it's _Taylor's_ email that is expanded now, but Alice's--which has moved to the bottom--appears collapsed.
+આ લિસ્ટમાં દરેક Contact પાસે તેની state છે, જે બતાવે છે કે તેની માટે "ઈમેઇલ બતાવો" બટન દબાયું છે કે નહીં.  
+તમે જો Alice માટે "ઈમેઇલ બતાવો" બટન દબાવો, અને પછી "ક્રમ બદલવો" ચેકબોક્સ પર ટિક્ક કરો,  
+તો તમે જોશો કે હવે _Taylor_ નું ઈમેઇલ ખુલેલું દેખાય છે, જ્યારે Alice — જે હવે નીચે ખસે ગઈ છે — તેનું ઈમેઇલ બંધ દેખાય છે.
 
-Fix it so that the expanded state is associated with each contact, regardless of the chosen ordering.
+આને ઠીક કરો જેથી દરેક contact સાથે તેનો ખુલેલો state જોડાય, અને ક્રમ બદલવા પર પણ તેનો અસર નો થાય.
 
 <Sandpack>
 
@@ -2016,7 +2020,8 @@ export default function ContactList() {
             setReverse(e.target.checked)
           }}
         />{' '}
-        Show in reverse order
+        વિપરીત ક્રમમાં બતાવો
+
       </label>
       <ul>
         {displayedContacts.map((contact, i) =>
@@ -2080,16 +2085,16 @@ button {
 
 <Solution>
 
-The problem is that this example was using index as a `key`:
+સમસ્યા એ છે કે આ ઉદાહરણમાં `key` તરીકે ઇન્ડેક્સનો ઉપયોગ કરવામાં આવી રહ્યો હતો:
 
 ```js
 {displayedContacts.map((contact, i) =>
   <li key={i}>
 ```
 
-However, you want the state to be associated with _each particular contact_.
+તેથી, તમે ઈચ્છો છો કે state _પ્રતિસાદ તરીકે દરેક વિશિષ્ટ contact_ સાથે જોડાય.
 
-Using the contact ID as a `key` instead fixes the issue:
+સામાન્ય રીતે, contact ID ને `key` તરીકે ઉપયોગ કરવાથી આ સમસ્યા ઠીક થઈ જાય છે:
 
 <Sandpack>
 
@@ -2115,7 +2120,8 @@ export default function ContactList() {
             setReverse(e.target.checked)
           }}
         />{' '}
-        Show in reverse order
+        Show in ક્રમ બદલવો
+
       </label>
       <ul>
         {displayedContacts.map(contact =>
@@ -2177,7 +2183,7 @@ button {
 
 </Sandpack>
 
-State is associated with the tree position. A `key` lets you specify a named position instead of relying on order.
+State શ્રેણીની સ્થાન સાથે જોડાય છે. `key` તમને ક્રમ પર આધાર રાખ્યા વગર એક નામાંકિત સ્થાન નિર્ધારિત કરવાની સુવિધા આપે છે.
 
 </Solution>