Incorporating changes

Author: BryanRonad

beta/src/pages/learn/sharing-state-between-components.md

@@ -77,13 +77,13 @@ h3, p { margin: 5px 0px; }
 
 <DiagramGroup>
 
-<Diagram name="sharing_state_child" height={367} width={477} alt="Diagram showing a tree of three components, one parent labeled Accordion and two children labeled Panel. Both Panel components contain isActive with value false.">
+<Diagram name="sharing_state_child" height={367} width={477} alt="तीन कौम्पोनॅन्ट वाले पेड़ का चित्र, जिसमे एक अक्कौरडियन लेबल वाला पैरेंट है और दो पैनल लेबल वाले चिल्ड्रेन. दोनों पैनल कौम्पोनॅन्ट में false वैल्यू वाली isActive है।">
 
 शुरुआत में दोनों `Panel`s की `isActive` state `false` है, इसलिए दोनों कोलैप्स्ड दिख रहे हैं
 
 </Diagram>
 
-<Diagram name="sharing_state_child_clicked" height={367} width={480} alt="The same diagram as the previous, with the isActive of the first child Panel component highlighted indicating a click with the isActive value set to true. The second Panel component still contains value false." >
+<Diagram name="sharing_state_child_clicked" height={367} width={480} alt="पिछले चित्र की तरह, इसमें पहेले पैनल चाइल्ड कौम्पोनॅन्ट का isActive हाईलाइट किया गया है, जिसका मतलब है की इसकी isActive वैल्यू क्लिक द्वारा true पर सेट की गयी है। दूसरा पैनल कौम्पोनॅन्ट में अभी भी false वैल्यू होगी।" >
 
 किसी भी `Panel` की `isActive` state तभी अपडेट होगी जब उस `Panel` का बटन दबाया जायेगा
 
@@ -270,13 +270,13 @@ h3, p { margin: 5px 0px; }
 
 <DiagramGroup>
 
-<Diagram name="sharing_state_parent" height={385} width={487} alt="Diagram showing a tree of three components, one parent labeled Accordion and two children labeled Panel. Accordion contains an activeIndex value of zero which turns into isActive value of true passed to the first Panel, and isActive value of false passed to the second Panel." >
+<Diagram name="sharing_state_parent" height={385} width={487} alt="तीन कौम्पोनॅन्ट' वाले पेड़ का चित्र, जिसमे एक अक्कौरडियन लेबल वाला पैरेंट है और दो पैनल लेबल वाले चिल्ड्रेन। अक्कौरडियन में शून्य वैल्यू की activeIndex है जिससे पहले पैनल में पास की गयी isActive वैल्यू true में बदल जाती है, और दुसरे पैनल में पास की गयी isActive वैल्यू false में बदल जाती है।" >
 
-शुरुआत में `Accordion` का `activeIndex` `0` है , इसलिए पहले `Panel` को `isActive = true` मिलेगा.
+शुरुआत में `Accordion` का `activeIndex` `0` है , इसलिए पहले `Panel` को `isActive = true` मिलेगा
 
 </Diagram>
 
-<Diagram name="sharing_state_parent_clicked" height={385} width={521} alt="The same diagram as the previous, with the activeIndex value of the parent Accordion component highlighted indicating a click with the value changed to one. The flow to both of the children Panel components is also highlighted, and the isActive value passed to each child is set to the opposite: false for the first Panel and true for the second one." >
+<Diagram name="sharing_state_parent_clicked" height={385} width={521} alt="पिछले चित्र की तरह, इस चित्र में पैरेंट अक्कौरडियन कौम्पोनॅन्ट के पैनल का isActive हाईलाइट किया गया है, जिसका मतलब है की इसकी वैल्यू क्लिक द्वारा एक पर सेट की गयी है। दोनों चिल्ड्रेन पैनल कौम्पोनॅन्ट्स का फ्लो भी हाईलाइट किया गया है, और हर चाइल्ड कौम्पोनॅन्ट को पास की गयी isActive वैल्यू विपरीत है: पहले पैनल के लिए false और दुसरे के लिए true।" >
 
 जब `Accordion` के `activeIndex` की state बदल कर `1` होगी, तब दूसरे `Panel` को `isActive = true` मिलेगा
 
@@ -286,42 +286,42 @@ h3, p { margin: 5px 0px; }
 
 <DeepDive title="नियंत्रित और अनियंत्रित कौम्पोनॅन्ट्स">
 
-सामान्यतः लोकल state वाले कौम्पोनॅन्ट को "अनियंत्रित" कहा जाता है। उदाहरण के लिए, `isActive` state वेरिएबल के साथ वाले ओरिजिनल `Panel` कौम्पोनॅन्ट को इसीलिए अनियंत्रित कहा जायेगा क्युकी इसका पैरेंट उसके पैनल के एक्टिव होने या न होने को प्रभावित नहीं कर सकता।
+लोकल state वाले कौम्पोनॅन्ट को "अनियंत्रित" कहा जाना आम बात है। उदाहरण के लिए, `isActive` state वेरिएबल के साथ वाले ओरिजिनल `Panel` कौम्पोनॅन्ट को इसीलिए अनियंत्रित कहा जायेगा क्युकी इसका पैरेंट उसके पैनल के एक्टिव होने या न होने को प्रभावित नहीं कर सकता।
 
 इसके ठीक विपरीत, एक कौम्पोनॅन्ट को "नियंत्रित" कहा जायेगा यदि उसकी महत्वपूर्ण सूचना, उसके अपने लोकल state के बजाये props द्वारा चलायी जाएगी। इस कारण, पैरेंट कौम्पोनॅन्ट उसके स्वभाव को पूरी तरह से स्पष्ट करता है। `isActive` prop वाला अंतिम कौम्पोनॅन्ट, `Accordion` कौम्पोनॅन्ट से नियंत्रीत होगा।
 
 अनियंत्रित कौम्पोनॅन्ट, अपनी कम कॉन्फ़िगरेशन ज़रूरतों के कारण अपने पेरेंट्स के अन्दर आसानी से इस्तेमाल किये जा सकते है। परन्तु उनको समन्वित करने के लिए ये कम लचीले है। नियंत्रित कौम्पोनॅन्ट अत्यधिक लचीले है परन्तु उसके लिए उनके पैरेंट कौम्पोनॅन्ट को props द्वारा पूरी तरह कॉन्फ़िगर करने की आवश्यकता है।
 
-प्रमाणिक तौर पर नियंत्रित और अनियंत्रित पूरी तरह से तांत्रिक शब्द नहीं है--प्रत्येक कौम्पोनॅन्ट अधिकतर लोकल state और props का मिश्रण है। परन्तु ये कौम्पोनॅन्ट्स के प्रारूप और क्षमताओं के बारे में बताने का कारगर तरीका है।
+प्रमाणिक तौर पर नियंत्रित और अनियंत्रित पूरी तरह से टेक्निकल शब्द नहीं है--प्रत्येक कौम्पोनॅन्ट अधिकतर लोकल state और props का मिश्रण है। परन्तु ये कौम्पोनॅन्ट्स के प्रारूप और क्षमताओं के बारे में बताने का कारगर तरीका है।
 
 कौम्पोनॅन्ट के बारे में लिखते समय इस बात का ख्याल रखे की कौनसी सूचना नियंत्रित (props द्वारा) और कौनसी अनियंत्रित (states द्वारा) है। पर यह आप बाद में बदलकर रीफैक्टर कर सकते है।
 
 </DeepDive>
 
-## हर state के लिए एक ही सोर्स ऑफ़ truth {/*a-single-source-of-truth-for-each-state*/}
+## हर state के लिए एक ही सोर्स ऑफ़ ट्रुथ {/*a-single-source-of-truth-for-each-state*/}
 
-React एप्लीकेशन में, कई कौम्पोनॅन्ट का अपना एक state होगा। Inputs की तरह के कुछ state अपने Leaf कौम्पोनॅन्ट के नजदीक "रह" सकते हैं (Tree के बॉटम में रहने वाले कौम्पोनॅन्ट्स)। कुछ state एप्प के टॉप पर "रह" सकते हैं। उदाहरण के लिए कुछ client-side routing लाइब्रेरीज implement करते समय उनके करंट state को React state में स्टोर किया जाता है और फिर props की मदद से पास किया जाता है!
+React एप्लीकेशन में, कई कौम्पोनॅन्ट का अपना एक state होगा। इनपुट्स की तरह के कुछ state अपने लीफ कौम्पोनॅन्ट (ट्री के सबसे निचे में रहने वाले कौम्पोनॅन्ट्स) के नजदीक "रह" सकते हैं। कुछ state एप्प के टॉप पर "रह" सकते हैं। उदाहरण के लिए कुछ client-side राउटिंग लाइब्रेरीज इम्प्लीमेंट करते समय उनके करंट state को React state में स्टोर किया जाता है और फिर props की मदद से पास किया जाता है!
 
-**किसी भी state के प्रत्येक विशिष्ट टुकड़े के लिए, आप वह कौम्पोनॅन्ट चुनेंगे जिसका वे "हिस्सा" हैं**। इस सिद्धांत को "सच्चाई का एक ही स्त्रोत" या ["सिंगल सोर्स ऑफ़ truth"](https://en.wikipedia.org/wiki/Single_source_of_truth) कहा जाता है। इसका मतलब यह नहीं की सारे state एक ही जगह रहते हैं--बल्कि state के _हर_ हिस्से के लिए, एक _विशिष्ट_ कौम्पोनॅन्ट है जो इस सूचना को अपने पास रखता है। सो कौम्पोनॅन्ट के बीच साझा (shared) state की duplicating करने के बजाये, आप _उनको उठा (लिफ्ट) कर_, उनके कॉमन साझा (shared) पैरेंट तक ले जायेंगे और उन्हें उनके जरूरतमंद चिल्ड्रेन तक _पास_ कर देंगे।
+**किसी भी state के प्रत्येक विशिष्ट टुकड़े के लिए, आप वह कौम्पोनॅन्ट चुनेंगे जिसका वे "हिस्सा" हैं**। इस सिद्धांत को "सच्चाई का एक ही स्त्रोत" या ["सिंगल सोर्स ऑफ़ ट्रुथ"](https://en.wikipedia.org/wiki/Single_source_of_truth) कहा जाता है। इसका मतलब यह नहीं की सारे state एक ही जगह रहते हैं--बल्कि state के _हर_ हिस्से के लिए, एक _विशिष्ट_ कौम्पोनॅन्ट है जो इस सूचना को अपने पास रखता है। कौम्पोनॅन्ट के बीच शेयर्ड state की डुप्लिकेटिंग करने के बजाये, आप _उनको लिफ्ट करके_, उनके कॉमन शेयर्ड पैरेंट तक ले जायेंगे और उन्हें उनके जरूरतमंद चिल्ड्रेन *तक पास* कर देंगे।
 
-आपका एप्प आपके काम करते करते बदलता जायेगा। State के हर हिस्से को उसकी "रहने" की सही जगह पहुंचाने तक, बार-बार state को अप या डाउन ले जाना सामान्य है। यह सब इस प्रक्रिया का हिस्सा है!
+आपका एप्प आपके काम करते करते बदलता जायेगा। State के हर हिस्से को उसकी "रहने" की सही जगह पहुंचाने तक, बार-बार state को अप या डाउन ले जाना सामान्य है। यह सब इस प्रोसेस का हिस्सा है!
 
 यदि आप कुछ और कौम्पोनॅन्ट के साथ प्रैक्टिस करने का अनुभव लेना चाहते हैं, तो इसके लिए [React में सोचना](/learn/thinking-in-react) लेख पढ़ें।
 
 <Recap>
 
-* यदि आप दो कंपोनेंट्स के बीच तालमेल करना चाहते हैं, तब उनकी state को उनके कॉमन पैरेंट पर मूव करें।
+* यदि आप दो कौम्पोनॅन्ट्स के बीच तालमेल करना चाहते हैं, तब उनकी state को उनके कॉमन पैरेंट पर मूव करें।
 * फिर इनफार्मेशन को कॉमन पैरेंट में से props की मदद से पास करें।
 * अंत में event-handler को पास-डाउन करें जिस से चिल्ड्रेन अपने पैरेंट state बदल सकें।
-* Iबेहतर होगा यदि कंपोनेंट्स को "कंट्रोल्ड"(props द्वारा ड्रिवन) या "अन-कंट्रोल्ड" (state द्वारा ड्रिवन) मानें।
+* बेहतर होगा यदि कौम्पोनॅन्ट्स को "कंट्रोल्ड" (props द्वारा ड्रिवन) या "अन-कंट्रोल्ड" (state द्वारा ड्रिवन) मानें।
 
 </Recap>
 
 <Challenges>
 
 ### सिंक किये हुए इनपुट {/*synced-inputs*/}
 
-ये दो इनपुट इंडिपेंडेंट हैं। इन्हें सिंक में रखने की कोशिश करें: एक इनपुट को एडिट करने पर दूसरा इनपुट उसकी टेक्स्ट से अपडेट होना चाहिए, और फिर vice versa।
+ये दो इनपुट इंडिपेंडेंट हैं। इन्हें सिंक में रखने की कोशिश करें: एक इनपुट को एडिट करने पर दूसरा इनपुट उसकी टेक्स्ट से अपडेट होना चाहिए, और फिर वाईस वर्सा।
 
 <Hint>
 
@@ -372,7 +372,7 @@ label { display: block; }
 
 <Solution>
 
-`text` state वेरिएबल को `handleChange` हैंडलरके साथ पैरेंट कौम्पोनॅन्ट में ले जाएँ। फिर उन्हें props की तरह दोनों इनपुट कौम्पोनॅन्ट में पास-डाउन करें। यह उन्हें सिंक में रखेगा।
+`text` state वेरिएबल को `handleChange` हैंडलर के साथ पैरेंट कौम्पोनॅन्ट में ले जाएँ। फिर उन्हें props की तरह दोनों इनपुट कौम्पोनॅन्ट में पास-डाउन करें। यह उन्हें सिंक में रखेगा।
 
 <Sandpack>
 
@@ -429,7 +429,7 @@ label { display: block; }
 
 इस उदाहरण में, `SearchBar` की अपनी एक `query` state है, जो टेक्स्ट इनपुट को नियंत्रित करती है। इसका पैरेंट `FilterableList` कौम्पोनॅन्ट `List` ऑफ़ आइटम डिस्प्ले करता है, पर सर्च query को अकाउंट में नहीं लेता है।
 
-`filterItems(foods, query)` फंक्शन की सहायता से लिस्ट को सर्च query के अनुसार फ़िल्टर करें।अपने changes को जांचने के लिए, "s" टाइप करके देखें की इनपुट फ़िल्टर लिस्ट में "Sushi", "Shish-Kabab" और "Dim-Sum" प्राप्त होते हैं।
+`filterItems(foods, query)` फंक्शन की सहायता से लिस्ट को सर्च query के अनुसार फ़िल्टर करें। अपने चैंजेस को जांचने के लिए, "s" टाइप करके देखें की इनपुट फ़िल्टर लिस्ट में "Sushi", "Shish kebab" और "Dim sum" प्राप्त होते हैं।
 
 ध्यान दें कि `filterItems` पहले से ही इम्प्लेमेंट और इम्पोर्ट हो गया है, जिस से उसे आपको खुद लिखना न पड़े!