From 89edae6070792818b4c3a946680bb45db6088dc0 Mon Sep 17 00:00:00 2001 From: BryanRonad Date: Sat, 27 Aug 2022 19:34:22 +0530 Subject: [PATCH 01/10] Update sharing-state-between-components.md --- .../learn/sharing-state-between-components.md | 422 +++++++++--------- 1 file changed, 210 insertions(+), 212 deletions(-) diff --git a/beta/src/pages/learn/sharing-state-between-components.md b/beta/src/pages/learn/sharing-state-between-components.md index 6a0d1c420..88422de2f 100644 --- a/beta/src/pages/learn/sharing-state-between-components.md +++ b/beta/src/pages/learn/sharing-state-between-components.md @@ -1,38 +1,38 @@ --- -title: Sharing State Between Components +title: कौम्पोनॅन्ट्स के बीच state शेयरिंग --- -Sometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as *lifting state up,* and it's one of the most common things you will do writing React code. +कभी-कभी आप चाहेंगे की दो कौम्पोनॅन्ट्स की state हमेशा एक साथ बदले। ऐसा करने के लिए पहले उन दोनों में से state को निकल दें, फिर उन्हें मूव कर के उनके निकटतम कॉमन पैरेंट के पास ले जाएँ, और फिर props के माध्यम से उनमें पास कर दें। इसे _"लिफ्टिंग state अप"_ कहा जाता है, और React कोड लिखे जाते समय, किया जाने वाला यह सबसे प्रचलित तरीका है। -- How to share state between components by lifting it up -- What are controlled and uncontrolled components +- लिफ्टिंग के द्वारा कौम्पोनॅन्ट्स के बीच state कैसे शेयर की जाये +- कंट्रोल्ड और अन-कंट्रोल्ड कौम्पोनॅन्ट्स क्या होते हैं -## Lifting state up by example {/*lifting-state-up-by-example*/} +## लिफ्टिंग state अप, उदाहरण के माध्यम से {/* lifting-state-up-by-example */} -In this example, a parent `Accordion` component renders two separate `Panel`s: +इस उदाहरण में एक पैरेंट `Accordion` कोम्पोनेंट दो विभिन्न `Panel`s को रेंडर करता है: -* `Accordion` +- `Accordion` - `Panel` - `Panel` -Each `Panel` component has a boolean `isActive` state that determines whether its content is visible. +प्रत्येक `Panel` कोम्पोनेंट में एक boolean `isActive` state है जो ये निर्धारित करती है कि कौन स कंटेंट दिखाई देगा। -Press the Show button for both panels: +दोनों panels के Show बटन को दबाएँ: ```js -import { useState } from 'react'; +import {useState} from 'react'; -function Panel({ title, children }) { +function Panel({title, children}) { const [isActive, setIsActive] = useState(false); return (
@@ -40,9 +40,7 @@ function Panel({ title, children }) { {isActive ? (

{children}

) : ( - + )}
); @@ -53,10 +51,15 @@ export default function Accordion() { <>

Almaty, Kazakhstan

- With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city. + With a population of about 2 million, Almaty is Kazakhstan's largest + city. From 1929 to 1997, it was its capital city. - The name comes from алма, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple. + The name comes from алма, the Kazakh word for + "apple" and is often translated as "full of apples". In fact, the region + surrounding Almaty is thought to be the ancestral home of the apple, and + the wild Malus sieversii is considered a likely + candidate for the ancestor of the modern domestic apple. ); @@ -64,7 +67,10 @@ export default function Accordion() { ``` ```css -h3, p { margin: 5px 0px; } +h3, +p { + margin: 5px 0px; +} .panel { padding: 10px; border: 1px solid #aaa; @@ -73,89 +79,92 @@ h3, p { margin: 5px 0px; } -Notice how pressing one panel's button does not affect the other panel--they are independent. +गौर कीजिये किस तरह एक panel का बटन दबाना दूसरे panel को प्रभावित नहीं करता--दोनों स्वतंत्र हैं। -Initially, each `Panel`'s `isActive` state is `false`, so they both appear collapsed +शुरुआत में दोनों `Panel`s की `isActive` state `false` है, इसलिए दोनों collapsed दिख रहे हैं -Clicking either `Panel`'s button will only update that `Panel`'s `isActive` state alone +किसी भी `Panel` की `isActive` state तभी अपडेट होगी जब उस `Panel` का बटन दबाया जायेगा -**But now let's say you want to change it so that only one panel is expanded at any given time.** With that design, expanding the second panel should collapse the first one. How would you do that? +**मान लीजिये यदि आप बदलाव के तौर पर चाहते हैं कि एक समय में सिर्फ एक ही Panel expand हो।** इस डिजाईन के मुताबिक़ एक पैनल के expand होने पर दूसरा collapse होना चाहिये। तो ये कैसे कर पाएंगे? -To coordinate these two panels, you need to "lift their state up" to a parent component in three steps: +इन दोनों Panels को संचालित करने के लिए, आपको तीन चरणों में इनके "state को लिफ्ट अप" करके इन्हें पैरेंट कौम्पोनॅन्ट में लाना होगा: -1. **Remove** state from the child components. -2. **Pass** hardcoded data from the common parent. -3. **Add** state to the common parent and pass it down together with the event handlers. +1. चाइल्ड कौम्पोनॅन्ट में से state को **हटाना**। +2. कॉमन पैरेंट में से हार्ड कोड किया हुआ डाटा **पास** करना। +3. कॉमन पैरेंट में state को फिर से **जोड़ कर** उसे event-handler के साथ पास करना। -This will allow the `Accordion` component to coordinate both `Panel`s and only expand one at a time. +ऐसा करने से `Accordion` कौम्पोनॅन्ट दोनों `Panel`s को संचालित कर पायेगा और एक समय में उनमें से एक ही expand होगा। -### Step 1: Remove state from the child components {/*step-1-remove-state-from-the-child-components*/} +### चरण १: चाइल्ड कौम्पोनॅन्ट में से state निकालना {/* step-1-remove-state-from-the-child-components */} -You will give control of the `Panel`'s `isActive` to its parent component. This means that the parent component will pass `isActive` to `Panel` as a prop instead. Start by **removing this line** from the `Panel` component: +आप `Panel` के `isActive` का कण्ट्रोल उसके पैरेंट कौम्पोनॅन्ट को देंगे। इसका मतलब है कि पैरेंट कौम्पोनॅन्ट `isActive` को `Panel` तक एक prop की तरह पास करेगा। आप `Panel` कौम्पोनॅन्ट से **यह लाइन हटाने** से शुरुआत कर सकते हैं: ```js const [isActive, setIsActive] = useState(false); ``` -And instead, add `isActive` to the `Panel`'s list of props: +और इसके बजाये, `Panel` के props की लिस्ट में `isActive` को जोड़ दें: ```js function Panel({ title, children, isActive }) { ``` -Now the `Panel`'s parent component can *control* `isActive` by [passing it down as a prop](/learn/passing-props-to-a-component). Conversely, the `Panel` component now has *no control* over the value of `isActive`--it's now up to the parent component! +अब `Panel` का पैरेंट कौम्पोनॅन्ट `isActive` को [prop की तरह पास कर](/learn/passing-props-to-a-component) के _नियंत्रित_ कर पायेगा। ठीक इसके विपरीत, अब `Panel` कौम्पोनॅन्ट का `isActive` की वैल्यू पर कोई _नियंत्रित नहीं_ रह जायेगा--ये अब पैरेंट कौम्पोनॅन्ट पर निर्भर है! -### Step 2: Pass hardcoded data from the common parent {/*step-2-pass-hardcoded-data-from-the-common-parent*/} +### चरण २: कॉमन पैरेंट कौम्पोनॅन्ट से हार्ड कोडेड डाटा को पास करना {/* step-2-pass-hardcoded-data-from-the-common-parent */} -To lift state up, you must locate the closest common parent component of *both* of the child components that you want to coordinate: +अब state को लिफ्ट अप करने के लिए आपको उस निकटतम कॉमन पैरेंट कौम्पोनॅन्ट का पता लगाना है, जो उन _दोनों_ चाइल्ड कौम्पोनॅन्ट का पैरेंट है जिन्हें आप संचालित करना चाहते हैं: -* `Accordion` *(closest common parent)* +- `Accordion` _(निकटतम कॉमन पैरेंट)_ - `Panel` - `Panel` -In this example, it's the `Accordion` component. Since it's above both panels and can control their props, it will become the "source of truth" for which panel is currently active. Make the `Accordion` component pass a hardcoded value of `isActive` (for example, `true`) to both panels: +इस उदाहरण में, यह Accordion कौम्पोनॅन्ट है। चूँकि यह दोनों panels के उपर है और उनके props को कंट्रोल कर सकता है, इसलिए यह अब ये वर्तमान में एक्टिव panel के लिए एक "सोर्स ऑफ़ truth" बन जायेगा। अब `Accordion` कौम्पोनॅन्ट से, दोनों panels की तरफ `isActive` की एक हार्ड कोडेड वैल्यू पास करवाएं (उदाहरण के लिए, `true`): ```js -import { useState } from 'react'; +import {useState} from 'react'; export default function Accordion() { return ( <>

Almaty, Kazakhstan

- With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city. + With a population of about 2 million, Almaty is Kazakhstan's largest + city. From 1929 to 1997, it was its capital city. - The name comes from алма, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple. + The name comes from алма, the Kazakh word for + "apple" and is often translated as "full of apples". In fact, the region + surrounding Almaty is thought to be the ancestral home of the apple, and + the wild Malus sieversii is considered a likely + candidate for the ancestor of the modern domestic apple. ); } -function Panel({ title, children, isActive }) { +function Panel({title, children, isActive}) { return (

{title}

{isActive ? (

{children}

) : ( - + )}
); @@ -163,7 +172,10 @@ function Panel({ title, children, isActive }) { ``` ```css -h3, p { margin: 5px 0px; } +h3, +p { + margin: 5px 0px; +} .panel { padding: 10px; border: 1px solid #aaa; @@ -172,45 +184,39 @@ h3, p { margin: 5px 0px; } -Try editing the hardcoded `isActive` values in the `Accordion` component and see the result on the screen. +अब `Accordion` कौम्पोनॅन्ट के हार्ड कोडेड `isActive` वैल्यूज को एडिट करें और स्क्रीन पर उसका रिजल्ट देखें। -### Step 3: Add state to the common parent {/*step-3-add-state-to-the-common-parent*/} +### चरण ३: कॉमन पैरेंट में state को जोड़ना {/* step-3-add-state-to-the-common-parent */} -Lifting state up often changes the nature of what you're storing as state. +State को लिफ्ट अप करते समय, कई बार उस state में हम क्या स्टोर कर रहे हैं, उसका नेचर बदल सकता है। -In this case, only one panel should be active at a time. This means that the `Accordion` common parent component needs to keep track of *which* panel is the active one. Instead of a `boolean` value, it could use a number as the index of the active `Panel` for the state variable: +ऐसे में एक समय पर सिर्फ एक ही panel एक्टिव रहना चाहिए। इसका मतलब है की `Accordion` कॉमन पैरेंट कौम्पोनॅन्ट को यह ट्रैक करते रहना होगा की _कौन सा_ panel एक्टिव है। सो `boolean` वैल्यू के बजाये , वो state वेरिएबल के लिए, एक नंबर को एक्टिव `Panel` के इंडेक्स की तरह इस्तेमाल कर सकता है: ```js const [activeIndex, setActiveIndex] = useState(0); ``` -When the `activeIndex` is `0`, the first panel is active, and when it's `1`, it's the second one. +जब `activeIndex` `0` हो तो पहला panel एक्टिव है, और अगर ये `1` हो तो दूसरा। -Clicking the "Show" button in either `Panel` needs to change the active index in `Accordion`. A `Panel` can't set the `activeIndex` state directly because it's defined inside the `Accordion`. The `Accordion` component needs to *explicitly allow* the `Panel` component to change its state by [passing an event handler down as a prop](/learn/responding-to-events#passing-event-handlers-as-props): +किसी भी Panel में "Show" का बटन दबाने पर `Accordion` में active index बदल जाना चाहिए। एक `Panel` सीधे ही `activeIndex` state सेट नहीं कर सकता क्योंकि वह `Accordion` के अन्दर डिफाइन किया गया है। `Accordion` कौम्पोनॅन्ट को साफ तौर पर `Panel` कौम्पोनॅन्ट को अपनी state बदलने की _इजाज़त_ देनी होगी, जिसके लिए उसे [event-handler को prop की तरह पास कराना होगा](/learn/responding-to-events#passing-event-handlers-as-props): ```js <> - setActiveIndex(0)} - > + setActiveIndex(0)}> ... - setActiveIndex(1)} - > + setActiveIndex(1)}> ... ``` -The ` - )} + {isActive ?

{children}

: } ); } ``` ```css -h3, p { margin: 5px 0px; } +h3, +p { + margin: 5px 0px; +} .panel { padding: 10px; border: 1px solid #aaa; @@ -266,73 +267,73 @@ h3, p { margin: 5px 0px; } -This completes lifting state up! Moving state into the common parent component allowed you to coordinate the two panels. Using the active index instead of two "is shown" flags ensured that only one panel is active at a given time. And passing down the event handler to the child allowed the child to change the parent's state. +इस तरह लिफ्टिंग states अप पूरा हुआ! State को कॉमन पैरेंट में मूव करने से दोनों panels के बीच संचालन संभव हो सका। दो "is shown" फ्लैग्स के बजाये, active index इस्तेमाल करने से, एक समय में एक ही panel एक्टिव रख पाना संभव हो सका। और event-handler को चाइल्ड तक पास-डाउन करने से चाइल्ड द्वारा पैरेंट state को बदलना संभव हो सका। -Initially, `Accordion`'s `activeIndex` is `0`, so the first `Panel` receives `isActive = true` +शुरुआत में `Accordion` का `activeIndex` `0` है , इसलिए पहले `Panel` को `isActive = true` मिलेगा. -When `Accordion`'s `activeIndex` state changes to `1`, the second `Panel` receives `isActive = true` instead +जब `Accordion` के `activeIndex` की state बदल कर `1` होगी, तब दूसरे `Panel` को `isActive = true` मिलेगा - + -It is common to call a component with some local state "uncontrolled". For example, the original `Panel` component with an `isActive` state variable is uncontrolled because its parent cannot influence whether the panel is active or not. +सामान्यतः लोकल state वाले कौम्पोनॅन्ट को "अनियंत्रित" कहा जाता है। उदाहरण के लिए, `isActive` state वेरिएबल के साथ वाले ओरिजिनल `Panel` कौम्पोनॅन्ट को इसीलिए अनियंत्रित कहा जायेगा क्युकी इसका पैरेंट उसके panel के एक्टिव होने या न होने को प्रभावित नहीं कर सकता। -In contrast, you might say a component is "controlled" when the important information in it is driven by props rather than its own local state. This lets the parent component fully specify its behavior. The final `Panel` component with the `isActive` prop is controlled by the `Accordion` component. +इसके ठीक विपरीत, एक कौम्पोनॅन्ट को "नियंत्रित" कहा जायेगा यदि उसकी महत्वपूर्ण सूचना, उसके अपने लोकल state के बजाये props द्वारा चलायी जाएगी। इस कारण, पैरेंट कौम्पोनॅन्ट उसके स्वभाव को पूरी तरह से स्पष्ट करता है। `isActive` prop वाला अंतिम कौम्पोनॅन्ट, `Accordion` कौम्पोनॅन्ट से नियंत्रीत होगा। -Uncontrolled components are easier to use within their parents because they require less configuration. But they're less flexible when you want to coordinate them together. Controlled components are maximally flexible, but they require the parent components to fully configure them with props. +अनियंत्रित कौम्पोनॅन्ट, अपनी कम कॉन्फ़िगरेशन ज़रूरतों के कारण अपने पेरेंट्स के अन्दर आसानी से इस्तेमाल किये जा सकते है। परन्तु उनको समन्वित करने के लिए ये कम लचीले है। नियंत्रित कौम्पोनॅन्ट अत्यधिक लचीले है परन्तु उसके लिए उनके पैरेंट कौम्पोनॅन्ट को props द्वारा पूरी तरह कॉन्फ़िगर करने की आवश्यकता है। -In practice, "controlled" and "uncontrolled" aren't strict technical terms--each component usually has some mix of both local state and props. However, this is a useful way to talk about how components are designed and what capabilities they offer. +प्रमाणिक तौर पर नियंत्रित और अनियंत्रित पूरी तरह से तांत्रिक शब्द नहीं है--प्रत्येक कौम्पोनॅन्ट अधिकतर लोकल state और props का मिश्रण है। परन्तु ये कौम्पोनॅन्ट्स के प्रारूप और क्षमताओं के बारे में बताने का कारगर तरीका है। -When writing a component, consider which information in it should be controlled (via props), and which information should be uncontrolled (via state). But you can always change your mind and refactor later. +कौम्पोनॅन्ट के बारे में लिखते समय इस बात का ख्याल रखे की कौनसी सूचना नियंत्रित (props द्वारा) और कौनसी अनियंत्रित (states द्वारा) है। पर यह आप बाद में बदलकर रीफैक्टर कर सकते है। -## A single source of truth for each state {/*a-single-source-of-truth-for-each-state*/} +## हर state के लिए एक ही सोर्स ऑफ़ truth {/* a-single-source-of-truth-for-each-state */} -In a React application, many components will have their own state. Some state may "live" close to the leaf components (components at the bottom of the tree) like inputs. Other state may "live" closer to the top of the app. For example, even client-side routing libraries are usually implemented by storing the current route in the React state, and passing it down by props! +React एप्लीकेशन में, कई कौम्पोनॅन्ट का अपना एक state होगा। Inputs की तरह के कुछ state अपने Leaf कौम्पोनॅन्ट के नजदीक "रह" सकते हैं (Tree के बॉटम में रहने वाले कौम्पोनॅन्ट्स)। कुछ state एप्प के टॉप पर "रह" सकते हैं। उदाहरण के लिए कुछ client-side routing लाइब्रेरीज implement करते समय उनके करंट state को React state में स्टोर किया जाता है और फिर props की मदद से पास किया जाता है! -**For each unique piece of state, you will choose the component that "owns" it**. This principle is also known as having a ["single source of truth."](https://en.wikipedia.org/wiki/Single_source_of_truth) It doesn't mean that all state lives in one place--but that for _each_ piece of state, there is a _specific_ component that holds that piece of information. Instead of duplicating shared state between components, you will *lift it up* to their common shared parent, and *pass it down* to the children that need it. +**किसी भी state के प्रत्येक विशिष्ट टुकड़े के लिए, आप वह कौम्पोनॅन्ट चुनेंगे जिसका वे "हिस्सा" हैं**। इस सिद्धांत को "सच्चाई का एक ही स्त्रोत" या ["सिंगल सोर्स ऑफ़ truth"](https://en.wikipedia.org/wiki/Single_source_of_truth) कहा जाता है। इसका मतलब यह नहीं की सारे state एक ही जगह रहते हैं--बल्कि state के _हर_ हिस्से के लिए, एक _विशिष्ट_ कौम्पोनॅन्ट है जो इस सूचना को अपने पास रखता है। सो कौम्पोनॅन्ट के बीच साझा (shared) state की duplicating करने के बजाये, आप _उनको उठा (लिफ्ट) कर_, उनके कॉमन साझा (shared) पैरेंट तक ले जायेंगे और उन्हें उनके जरूरतमंद चिल्ड्रेन तक _पास_ कर देंगे। -Your app will change as you work on it. It is common that you will move state down or back up while you're still figuring out where each piece of the state "lives". This is all part of the process! +आपका एप्प आपके काम करते करते बदलता जायेगा। State के हर हिस्से को उसकी "रहने" की सही जगह पहुंचाने तक, बार-बार state को अप या डाउन ले जाना सामान्य है। यह सब इस प्रक्रिया का हिस्सा है! -To see what this feels like in practice with a few more components, read [Thinking in React](/learn/thinking-in-react). +यदि आप कुछ और कौम्पोनॅन्ट के साथ प्रैक्टिस करने का अनुभव लेना चाहते हैं, तो इसके लिए [React में सोचना](/learn/thinking-in-react) लेख पढ़ें। -* When you want to coordinate two components, move their state to their common parent. -* Then pass the information down through props from their common parent. -* Finally, pass the event handlers down so that the children can change the parent's state. -* It's useful to consider components as "controlled" (driven by props) or "uncontrolled" (driven by state). +- यदि आप दो कंपोनेंट्स के बीच तालमेल करना चाहते हैं, तब उनकी state को उनके कॉमन पैरेंट पर मूव करें। +- फिर इनफार्मेशन को कॉमन पैरेंट में से props की मदद से पास करें। +- अंत में event-handler को पास-डाउन करें जिस से चिल्ड्रेन अपने पैरेंट state बदल सकें। +- Iबेहतर होगा यदि कंपोनेंट्स को "कंट्रोल्ड"(props द्वारा ड्रिवन) या "अन-कंट्रोल्ड" (state द्वारा ड्रिवन) मानें। -### Synced inputs {/*synced-inputs*/} +### सिंक किये हुए इनपुट {/* synced-inputs */} -These two inputs are independent. Make them stay in sync: editing one input should update the other input with the same text, and vice versa. +ये दो इनपुट इंडिपेंडेंट हैं। इन्हें सिंक में रखने की कोशिश करें: एक इनपुट को एडिट करने पर दूसरा इनपुट उसकी टेक्स्ट से अपडेट होना चाहिए, और फिर vice versa। -You'll need to lift their state up into the parent component. +आपको उनके स्टेट को लिफ्ट अप करके पैरेंट कौम्पोनॅन्ट में डालना होगा। ```js -import { useState } from 'react'; +import {useState} from 'react'; export default function SyncedInputs() { return ( @@ -343,7 +344,7 @@ export default function SyncedInputs() { ); } -function Input({ label }) { +function Input({label}) { const [text, setText] = useState(''); function handleChange(e) { @@ -352,32 +353,31 @@ function Input({ label }) { return ( ); } ``` ```css -input { margin: 5px; } -label { display: block; } +input { + margin: 5px; +} +label { + display: block; +} ``` -Move the `text` state variable into the parent component along with the `handleChange` handler. Then pass them down as props to both of the `Input` components. This will keep them in sync. +`text` state वेरिएबल को `handleChange` हैंडलरके साथ पैरेंट कौम्पोनॅन्ट में ले जाएँ। फिर उन्हें props की तरह दोनों इनपुट कौम्पोनॅन्ट में पास-डाउन करें। यह उन्हें सिंक में रखेगा। ```js -import { useState } from 'react'; +import {useState} from 'react'; export default function SyncedInputs() { const [text, setText] = useState(''); @@ -388,62 +388,53 @@ export default function SyncedInputs() { return ( <> - - + + ); } -function Input({ label, value, onChange }) { +function Input({label, value, onChange}) { return ( ); } ``` ```css -input { margin: 5px; } -label { display: block; } +input { + margin: 5px; +} +label { + display: block; +} ``` -### Filtering a list {/*filtering-a-list*/} +### लिस्ट फ़िल्टर करना {/* filtering-a-list */} -In this example, the `SearchBar` has its own `query` state that controls the text input. Its parent `FilterableList` component displays a `List` of items, but it doesn't take the search query into account. +इस उदाहरण में, `SearchBar` की अपनी एक `query` state है, जो टेक्स्ट इनपुट को नियंत्रित करती है। इसका पैरेंट `FilterableList` कौम्पोनॅन्ट `List` ऑफ़ आइटम डिस्प्ले करता है, पर सर्च query को अकाउंट में नहीं लेता है। -Use the `filterItems(foods, query)` function to filter the list according to the search query. To test your changes, verify that typing "s" into the input filters down the list to "Sushi", "Shish kebab", and "Dim sum". +`filterItems(foods, query)` फंक्शन की सहायता से लिस्ट को सर्च query के अनुसार फ़िल्टर करें।अपने changes को जांचने के लिए, "s" टाइप करके देखें की इनपुट फ़िल्टर लिस्ट में "Sushi", "Shish-Kabab" और "Dim-Sum" प्राप्त होते हैं। -Note that `filterItems` is already implemented and imported so you don't need to write it yourself! +ध्यान दें कि `filterItems` पहले से ही इम्प्लेमेंट और इम्पोर्ट हो गया है, जिस से उसे आपको खुद लिखना न पड़े! -You will want to remove the `query` state and the `handleChange` handler from the `SearchBar`, and move them to the `FilterableList`. Then pass them down to `SearchBar` as `query` and `onChange` props. +आप `query` state और `handleChange` हैंडलर को `SearchBar` से निकाल कर, उन्हें `FilterableList` की ओर ले जाना चाहेंगे। इसके लिए उन्हें `SearchBar` से `query` और `onChange` props की तरह पास-डाउन करें। ```js -import { useState } from 'react'; -import { foods, filterItems } from './data.js'; +import {useState} from 'react'; +import {foods, filterItems} from './data.js'; export default function FilterableList() { return ( @@ -464,19 +455,15 @@ function SearchBar() { return ( ); } -function List({ items }) { +function List({items}) { return ( - - {items.map(food => ( +
+ {items.map((food) => ( @@ -490,47 +477,56 @@ function List({ items }) { ```js data.js export function filterItems(items, query) { query = query.toLowerCase(); - return items.filter(item => - item.name.split(' ').some(word => - word.toLowerCase().startsWith(query) - ) + return items.filter((item) => + item.name.split(' ').some((word) => word.toLowerCase().startsWith(query)) ); } -export const foods = [{ - id: 0, - name: 'Sushi', - description: 'Sushi is a traditional Japanese dish of prepared vinegared rice' -}, { - id: 1, - name: 'Dal', - description: 'The most common way of preparing dal is in the form of a soup to which onions, tomatoes and various spices may be added' -}, { - id: 2, - name: 'Pierogi', - description: 'Pierogi are filled dumplings made by wrapping unleavened dough around a savoury or sweet filling and cooking in boiling water' -}, { - id: 3, - name: 'Shish kebab', - description: 'Shish kebab is a popular meal of skewered and grilled cubes of meat.' -}, { - id: 4, - name: 'Dim sum', - description: 'Dim sum is a large range of small dishes that Cantonese people traditionally enjoy in restaurants for breakfast and lunch' -}]; +export const foods = [ + { + id: 0, + name: 'Sushi', + description: + 'Sushi is a traditional Japanese dish of prepared vinegared rice', + }, + { + id: 1, + name: 'Dal', + description: + 'The most common way of preparing dal is in the form of a soup to which onions, tomatoes and various spices may be added', + }, + { + id: 2, + name: 'Pierogi', + description: + 'Pierogi are filled dumplings made by wrapping unleavened dough around a savoury or sweet filling and cooking in boiling water', + }, + { + id: 3, + name: 'Shish kebab', + description: + 'Shish kebab is a popular meal of skewered and grilled cubes of meat.', + }, + { + id: 4, + name: 'Dim sum', + description: + 'Dim sum is a large range of small dishes that Cantonese people traditionally enjoy in restaurants for breakfast and lunch', + }, +]; ``` -Lift the `query` state up into the `FilterableList` component. Call `filterItems(foods, query)` to get the filtered list and pass it down to the `List`. Now changing the query input is reflected in the list: +`query` state को `FilterableList` कौम्पोनॅन्ट में लिफ्ट अप करें। फ़िल्टर की हुई लिस्ट पाने के लिए `filterItems(foods, query)` को कॉल करें और उसे `List` की ओर पास डाउन करें। अब लिस्ट में query इनपुट का बदलाव नज़र आयेगा: ```js -import { useState } from 'react'; -import { foods, filterItems } from './data.js'; +import {useState} from 'react'; +import {foods, filterItems} from './data.js'; export default function FilterableList() { const [query, setQuery] = useState(''); @@ -542,32 +538,25 @@ export default function FilterableList() { return ( <> - +
); } -function SearchBar({ query, onChange }) { +function SearchBar({query, onChange}) { return ( ); } -function List({ items }) { +function List({items}) { return ( -
{food.name} {food.description}
- {items.map(food => ( +
+ {items.map((food) => ( @@ -581,38 +570,47 @@ function List({ items }) { ```js data.js export function filterItems(items, query) { query = query.toLowerCase(); - return items.filter(item => - item.name.split(' ').some(word => - word.toLowerCase().startsWith(query) - ) + return items.filter((item) => + item.name.split(' ').some((word) => word.toLowerCase().startsWith(query)) ); } -export const foods = [{ - id: 0, - name: 'Sushi', - description: 'Sushi is a traditional Japanese dish of prepared vinegared rice' -}, { - id: 1, - name: 'Dal', - description: 'The most common way of preparing dal is in the form of a soup to which onions, tomatoes and various spices may be added' -}, { - id: 2, - name: 'Pierogi', - description: 'Pierogi are filled dumplings made by wrapping unleavened dough around a savoury or sweet filling and cooking in boiling water' -}, { - id: 3, - name: 'Shish kebab', - description: 'Shish kebab is a popular meal of skewered and grilled cubes of meat.' -}, { - id: 4, - name: 'Dim sum', - description: 'Dim sum is a large range of small dishes that Cantonese people traditionally enjoy in restaurants for breakfast and lunch' -}]; +export const foods = [ + { + id: 0, + name: 'Sushi', + description: + 'Sushi is a traditional Japanese dish of prepared vinegared rice', + }, + { + id: 1, + name: 'Dal', + description: + 'The most common way of preparing dal is in the form of a soup to which onions, tomatoes and various spices may be added', + }, + { + id: 2, + name: 'Pierogi', + description: + 'Pierogi are filled dumplings made by wrapping unleavened dough around a savoury or sweet filling and cooking in boiling water', + }, + { + id: 3, + name: 'Shish kebab', + description: + 'Shish kebab is a popular meal of skewered and grilled cubes of meat.', + }, + { + id: 4, + name: 'Dim sum', + description: + 'Dim sum is a large range of small dishes that Cantonese people traditionally enjoy in restaurants for breakfast and lunch', + }, +]; ``` - \ No newline at end of file + From e689ea628028e5a36989550d4962325f2a7d5326 Mon Sep 17 00:00:00 2001 From: BryanRonad Date: Sat, 27 Aug 2022 20:03:13 +0530 Subject: [PATCH 02/10] Reverted prettier formatting to original --- .../learn/sharing-state-between-components.md | 326 +++++++++--------- 1 file changed, 164 insertions(+), 162 deletions(-) diff --git a/beta/src/pages/learn/sharing-state-between-components.md b/beta/src/pages/learn/sharing-state-between-components.md index 88422de2f..9ad328d08 100644 --- a/beta/src/pages/learn/sharing-state-between-components.md +++ b/beta/src/pages/learn/sharing-state-between-components.md @@ -15,11 +15,11 @@ title: कौम्पोनॅन्ट्स के बीच state शेय -## लिफ्टिंग state अप, उदाहरण के माध्यम से {/* lifting-state-up-by-example */} +## लिफ्टिंग state अप, उदाहरण के माध्यम से {/*lifting-state-up-by-example*/} इस उदाहरण में एक पैरेंट `Accordion` कोम्पोनेंट दो विभिन्न `Panel`s को रेंडर करता है: -- `Accordion` +* `Accordion` - `Panel` - `Panel` @@ -30,9 +30,9 @@ title: कौम्पोनॅन्ट्स के बीच state शेय ```js -import {useState} from 'react'; +import { useState } from 'react'; -function Panel({title, children}) { +function Panel({ title, children }) { const [isActive, setIsActive] = useState(false); return (
@@ -40,7 +40,9 @@ function Panel({title, children}) { {isActive ? (

{children}

) : ( - + )}
); @@ -51,15 +53,10 @@ export default function Accordion() { <>

Almaty, Kazakhstan

- With a population of about 2 million, Almaty is Kazakhstan's largest - city. From 1929 to 1997, it was its capital city. + With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city. - The name comes from алма, the Kazakh word for - "apple" and is often translated as "full of apples". In fact, the region - surrounding Almaty is thought to be the ancestral home of the apple, and - the wild Malus sieversii is considered a likely - candidate for the ancestor of the modern domestic apple. + The name comes from алма, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple. ); @@ -67,10 +64,7 @@ export default function Accordion() { ``` ```css -h3, -p { - margin: 5px 0px; -} +h3, p { margin: 5px 0px; } .panel { padding: 10px; border: 1px solid #aaa; @@ -107,7 +101,7 @@ p { ऐसा करने से `Accordion` कौम्पोनॅन्ट दोनों `Panel`s को संचालित कर पायेगा और एक समय में उनमें से एक ही expand होगा। -### चरण १: चाइल्ड कौम्पोनॅन्ट में से state निकालना {/* step-1-remove-state-from-the-child-components */} +### चरण १: चाइल्ड कौम्पोनॅन्ट में से state निकालना {/*step-1-remove-state-from-the-child-components*/} आप `Panel` के `isActive` का कण्ट्रोल उसके पैरेंट कौम्पोनॅन्ट को देंगे। इसका मतलब है कि पैरेंट कौम्पोनॅन्ट `isActive` को `Panel` तक एक prop की तरह पास करेगा। आप `Panel` कौम्पोनॅन्ट से **यह लाइन हटाने** से शुरुआत कर सकते हैं: @@ -123,11 +117,11 @@ function Panel({ title, children, isActive }) { अब `Panel` का पैरेंट कौम्पोनॅन्ट `isActive` को [prop की तरह पास कर](/learn/passing-props-to-a-component) के _नियंत्रित_ कर पायेगा। ठीक इसके विपरीत, अब `Panel` कौम्पोनॅन्ट का `isActive` की वैल्यू पर कोई _नियंत्रित नहीं_ रह जायेगा--ये अब पैरेंट कौम्पोनॅन्ट पर निर्भर है! -### चरण २: कॉमन पैरेंट कौम्पोनॅन्ट से हार्ड कोडेड डाटा को पास करना {/* step-2-pass-hardcoded-data-from-the-common-parent */} +### चरण २: कॉमन पैरेंट कौम्पोनॅन्ट से हार्ड कोडेड डाटा को पास करना {/*step-2-pass-hardcoded-data-from-the-common-parent*/} अब state को लिफ्ट अप करने के लिए आपको उस निकटतम कॉमन पैरेंट कौम्पोनॅन्ट का पता लगाना है, जो उन _दोनों_ चाइल्ड कौम्पोनॅन्ट का पैरेंट है जिन्हें आप संचालित करना चाहते हैं: -- `Accordion` _(निकटतम कॉमन पैरेंट)_ +* `Accordion` _(निकटतम कॉमन पैरेंट)_ - `Panel` - `Panel` @@ -136,35 +130,32 @@ function Panel({ title, children, isActive }) { ```js -import {useState} from 'react'; +import { useState } from 'react'; export default function Accordion() { return ( <>

Almaty, Kazakhstan

- With a population of about 2 million, Almaty is Kazakhstan's largest - city. From 1929 to 1997, it was its capital city. + With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city. - The name comes from алма, the Kazakh word for - "apple" and is often translated as "full of apples". In fact, the region - surrounding Almaty is thought to be the ancestral home of the apple, and - the wild Malus sieversii is considered a likely - candidate for the ancestor of the modern domestic apple. + The name comes from алма, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple. ); } -function Panel({title, children, isActive}) { +function Panel({ title, children, isActive }) { return (

{title}

{isActive ? (

{children}

) : ( - + )}
); @@ -172,10 +163,7 @@ function Panel({title, children, isActive}) { ``` ```css -h3, -p { - margin: 5px 0px; -} +h3, p { margin: 5px 0px; } .panel { padding: 10px; border: 1px solid #aaa; @@ -186,7 +174,7 @@ p { अब `Accordion` कौम्पोनॅन्ट के हार्ड कोडेड `isActive` वैल्यूज को एडिट करें और स्क्रीन पर उसका रिजल्ट देखें। -### चरण ३: कॉमन पैरेंट में state को जोड़ना {/* step-3-add-state-to-the-common-parent */} +### चरण ३: कॉमन पैरेंट में state को जोड़ना {/*step-3-add-state-to-the-common-parent*/} State को लिफ्ट अप करते समय, कई बार उस state में हम क्या स्टोर कर रहे हैं, उसका नेचर बदल सकता है। @@ -202,10 +190,16 @@ const [activeIndex, setActiveIndex] = useState(0); ```js <> - setActiveIndex(0)}> + setActiveIndex(0)} + > ... - setActiveIndex(1)}> + setActiveIndex(1)} + > ... @@ -216,7 +210,7 @@ const [activeIndex, setActiveIndex] = useState(0); ```js -import {useState} from 'react'; +import { useState } from 'react'; export default function Accordion() { const [activeIndex, setActiveIndex] = useState(0); @@ -226,39 +220,44 @@ export default function Accordion() { setActiveIndex(0)}> - With a population of about 2 million, Almaty is Kazakhstan's largest - city. From 1929 to 1997, it was its capital city. + onShow={() => setActiveIndex(0)} + > + With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city. setActiveIndex(1)}> - The name comes from алма, the Kazakh word for - "apple" and is often translated as "full of apples". In fact, the region - surrounding Almaty is thought to be the ancestral home of the apple, and - the wild Malus sieversii is considered a likely - candidate for the ancestor of the modern domestic apple. + onShow={() => setActiveIndex(1)} + > + The name comes from алма, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple. ); } -function Panel({title, children, isActive, onShow}) { +function Panel({ + title, + children, + isActive, + onShow +}) { return (

{title}

- {isActive ?

{children}

: } + {isActive ? ( +

{children}

+ ) : ( + + )}
); } ``` ```css -h3, -p { - margin: 5px 0px; -} +h3, p { margin: 5px 0px; } .panel { padding: 10px; border: 1px solid #aaa; @@ -299,7 +298,7 @@ p { -## हर state के लिए एक ही सोर्स ऑफ़ truth {/* a-single-source-of-truth-for-each-state */} +## हर state के लिए एक ही सोर्स ऑफ़ truth {/*a-single-source-of-truth-for-each-state*/} React एप्लीकेशन में, कई कौम्पोनॅन्ट का अपना एक state होगा। Inputs की तरह के कुछ state अपने Leaf कौम्पोनॅन्ट के नजदीक "रह" सकते हैं (Tree के बॉटम में रहने वाले कौम्पोनॅन्ट्स)। कुछ state एप्प के टॉप पर "रह" सकते हैं। उदाहरण के लिए कुछ client-side routing लाइब्रेरीज implement करते समय उनके करंट state को React state में स्टोर किया जाता है और फिर props की मदद से पास किया जाता है! @@ -311,16 +310,16 @@ React एप्लीकेशन में, कई कौम्पोनॅन -- यदि आप दो कंपोनेंट्स के बीच तालमेल करना चाहते हैं, तब उनकी state को उनके कॉमन पैरेंट पर मूव करें। -- फिर इनफार्मेशन को कॉमन पैरेंट में से props की मदद से पास करें। -- अंत में event-handler को पास-डाउन करें जिस से चिल्ड्रेन अपने पैरेंट state बदल सकें। -- Iबेहतर होगा यदि कंपोनेंट्स को "कंट्रोल्ड"(props द्वारा ड्रिवन) या "अन-कंट्रोल्ड" (state द्वारा ड्रिवन) मानें। +* यदि आप दो कंपोनेंट्स के बीच तालमेल करना चाहते हैं, तब उनकी state को उनके कॉमन पैरेंट पर मूव करें। +* फिर इनफार्मेशन को कॉमन पैरेंट में से props की मदद से पास करें। +* अंत में event-handler को पास-डाउन करें जिस से चिल्ड्रेन अपने पैरेंट state बदल सकें। +* Iबेहतर होगा यदि कंपोनेंट्स को "कंट्रोल्ड"(props द्वारा ड्रिवन) या "अन-कंट्रोल्ड" (state द्वारा ड्रिवन) मानें। -### सिंक किये हुए इनपुट {/* synced-inputs */} +### सिंक किये हुए इनपुट {/*synced-inputs*/} ये दो इनपुट इंडिपेंडेंट हैं। इन्हें सिंक में रखने की कोशिश करें: एक इनपुट को एडिट करने पर दूसरा इनपुट उसकी टेक्स्ट से अपडेट होना चाहिए, और फिर vice versa। @@ -333,7 +332,7 @@ React एप्लीकेशन में, कई कौम्पोनॅन ```js -import {useState} from 'react'; +import { useState } from 'react'; export default function SyncedInputs() { return ( @@ -344,7 +343,7 @@ export default function SyncedInputs() { ); } -function Input({label}) { +function Input({ label }) { const [text, setText] = useState(''); function handleChange(e) { @@ -353,19 +352,20 @@ function Input({label}) { return ( ); } ``` ```css -input { - margin: 5px; -} -label { - display: block; -} +input { margin: 5px; } +label { display: block; } ``` @@ -377,7 +377,7 @@ label { ```js -import {useState} from 'react'; +import { useState } from 'react'; export default function SyncedInputs() { const [text, setText] = useState(''); @@ -388,35 +388,44 @@ export default function SyncedInputs() { return ( <> - - + + ); } -function Input({label, value, onChange}) { +function Input({ label, value, onChange }) { return ( ); } ``` ```css -input { - margin: 5px; -} -label { - display: block; -} +input { margin: 5px; } +label { display: block; } ``` -### लिस्ट फ़िल्टर करना {/* filtering-a-list */} +### लिस्ट फ़िल्टर करना {/*filtering-a-list*/} इस उदाहरण में, `SearchBar` की अपनी एक `query` state है, जो टेक्स्ट इनपुट को नियंत्रित करती है। इसका पैरेंट `FilterableList` कौम्पोनॅन्ट `List` ऑफ़ आइटम डिस्प्ले करता है, पर सर्च query को अकाउंट में नहीं लेता है। @@ -433,8 +442,8 @@ label { ```js -import {useState} from 'react'; -import {foods, filterItems} from './data.js'; +import { useState } from 'react'; +import { foods, filterItems } from './data.js'; export default function FilterableList() { return ( @@ -455,15 +464,19 @@ function SearchBar() { return ( ); } -function List({items}) { +function List({ items }) { return ( -
{food.name} {food.description}
- {items.map((food) => ( +
+ {items.map(food => ( @@ -477,43 +490,34 @@ function List({items}) { ```js data.js export function filterItems(items, query) { query = query.toLowerCase(); - return items.filter((item) => - item.name.split(' ').some((word) => word.toLowerCase().startsWith(query)) + return items.filter(item => + item.name.split(' ').some(word => + word.toLowerCase().startsWith(query) + ) ); } -export const foods = [ - { - id: 0, - name: 'Sushi', - description: - 'Sushi is a traditional Japanese dish of prepared vinegared rice', - }, - { - id: 1, - name: 'Dal', - description: - 'The most common way of preparing dal is in the form of a soup to which onions, tomatoes and various spices may be added', - }, - { - id: 2, - name: 'Pierogi', - description: - 'Pierogi are filled dumplings made by wrapping unleavened dough around a savoury or sweet filling and cooking in boiling water', - }, - { - id: 3, - name: 'Shish kebab', - description: - 'Shish kebab is a popular meal of skewered and grilled cubes of meat.', - }, - { - id: 4, - name: 'Dim sum', - description: - 'Dim sum is a large range of small dishes that Cantonese people traditionally enjoy in restaurants for breakfast and lunch', - }, -]; +export const foods = [{ + id: 0, + name: 'Sushi', + description: 'Sushi is a traditional Japanese dish of prepared vinegared rice' +}, { + id: 1, + name: 'Dal', + description: 'The most common way of preparing dal is in the form of a soup to which onions, tomatoes and various spices may be added' +}, { + id: 2, + name: 'Pierogi', + description: 'Pierogi are filled dumplings made by wrapping unleavened dough around a savoury or sweet filling and cooking in boiling water' +}, { + id: 3, + name: 'Shish kebab', + description: 'Shish kebab is a popular meal of skewered and grilled cubes of meat.' +}, { + id: 4, + name: 'Dim sum', + description: 'Dim sum is a large range of small dishes that Cantonese people traditionally enjoy in restaurants for breakfast and lunch' +}]; ``` @@ -525,8 +529,8 @@ export const foods = [ ```js -import {useState} from 'react'; -import {foods, filterItems} from './data.js'; +import { useState } from 'react'; +import { foods, filterItems } from './data.js'; export default function FilterableList() { const [query, setQuery] = useState(''); @@ -538,25 +542,32 @@ export default function FilterableList() { return ( <> - +
); } -function SearchBar({query, onChange}) { +function SearchBar({ query, onChange }) { return ( ); } -function List({items}) { +function List({ items }) { return ( -
{food.name} {food.description}
- {items.map((food) => ( +
+ {items.map(food => ( @@ -570,47 +581,38 @@ function List({items}) { ```js data.js export function filterItems(items, query) { query = query.toLowerCase(); - return items.filter((item) => - item.name.split(' ').some((word) => word.toLowerCase().startsWith(query)) + return items.filter(item => + item.name.split(' ').some(word => + word.toLowerCase().startsWith(query) + ) ); } -export const foods = [ - { - id: 0, - name: 'Sushi', - description: - 'Sushi is a traditional Japanese dish of prepared vinegared rice', - }, - { - id: 1, - name: 'Dal', - description: - 'The most common way of preparing dal is in the form of a soup to which onions, tomatoes and various spices may be added', - }, - { - id: 2, - name: 'Pierogi', - description: - 'Pierogi are filled dumplings made by wrapping unleavened dough around a savoury or sweet filling and cooking in boiling water', - }, - { - id: 3, - name: 'Shish kebab', - description: - 'Shish kebab is a popular meal of skewered and grilled cubes of meat.', - }, - { - id: 4, - name: 'Dim sum', - description: - 'Dim sum is a large range of small dishes that Cantonese people traditionally enjoy in restaurants for breakfast and lunch', - }, -]; +export const foods = [{ + id: 0, + name: 'Sushi', + description: 'Sushi is a traditional Japanese dish of prepared vinegared rice' +}, { + id: 1, + name: 'Dal', + description: 'The most common way of preparing dal is in the form of a soup to which onions, tomatoes and various spices may be added' +}, { + id: 2, + name: 'Pierogi', + description: 'Pierogi are filled dumplings made by wrapping unleavened dough around a savoury or sweet filling and cooking in boiling water' +}, { + id: 3, + name: 'Shish kebab', + description: 'Shish kebab is a popular meal of skewered and grilled cubes of meat.' +}, { + id: 4, + name: 'Dim sum', + description: 'Dim sum is a large range of small dishes that Cantonese people traditionally enjoy in restaurants for breakfast and lunch' +}]; ``` - + \ No newline at end of file From 8c368190bbf24413166898cf2fde72d0e3c289d2 Mon Sep 17 00:00:00 2001 From: BryanRonad Date: Tue, 13 Sep 2022 09:20:22 +0530 Subject: [PATCH 03/10] Incorporating changes --- .../learn/sharing-state-between-components.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/beta/src/pages/learn/sharing-state-between-components.md b/beta/src/pages/learn/sharing-state-between-components.md index 9ad328d08..0e5b4ffe7 100644 --- a/beta/src/pages/learn/sharing-state-between-components.md +++ b/beta/src/pages/learn/sharing-state-between-components.md @@ -4,7 +4,7 @@ title: कौम्पोनॅन्ट्स के बीच state शेय -कभी-कभी आप चाहेंगे की दो कौम्पोनॅन्ट्स की state हमेशा एक साथ बदले। ऐसा करने के लिए पहले उन दोनों में से state को निकल दें, फिर उन्हें मूव कर के उनके निकटतम कॉमन पैरेंट के पास ले जाएँ, और फिर props के माध्यम से उनमें पास कर दें। इसे _"लिफ्टिंग state अप"_ कहा जाता है, और React कोड लिखे जाते समय, किया जाने वाला यह सबसे प्रचलित तरीका है। +कभी-कभी आप चाहेंगे की दो कौम्पोनॅन्ट्स की state हमेशा एक साथ बदले। ऐसा करने के लिए पहले उन दोनों में से state को निकल दें, फिर उन्हें मूव कर के उनके निकटतम कॉमन पैरेंट के पास ले जाएँ, और फिर props के माध्यम से उनमें पास कर दें। इसे _"लिफ्टिंग state अप"_ कहा जाता है, और React कोड लिखे जाते समय, किया जाने वाला यह सबसे कॉमन तरीका है। @@ -17,13 +17,13 @@ title: कौम्पोनॅन्ट्स के बीच state शेय ## लिफ्टिंग state अप, उदाहरण के माध्यम से {/*lifting-state-up-by-example*/} -इस उदाहरण में एक पैरेंट `Accordion` कोम्पोनेंट दो विभिन्न `Panel`s को रेंडर करता है: +इस उदाहरण में एक पैरेंट `Accordion` कौम्पोनॅन्ट दो विभिन्न `Panel`s को रेंडर करता है: * `Accordion` - `Panel` - `Panel` -प्रत्येक `Panel` कोम्पोनेंट में एक boolean `isActive` state है जो ये निर्धारित करती है कि कौन स कंटेंट दिखाई देगा। +प्रत्येक `Panel` कौम्पोनॅन्ट में एक boolean `isActive` state है जो ये निर्धारित करती है कि कौन स कंटेंट दिखाई देगा। दोनों panels के Show बटन को दबाएँ: @@ -53,10 +53,10 @@ export default function Accordion() { <>

Almaty, Kazakhstan

- With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city. + २० लाख की आबादी के साथ, अलमाती कज़ख़िस्तान का सबसे बड़ा शहर है। १९२९ से १९९७ तक, वह उसकी राजधानी थी। - The name comes from алма, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple. + यह नाम алма से आता है, जो "सेब" का कज़ाख शब्द है और अक्सर "सेब से भरपूर" में अनुवाद करता है। असल में, अलमाती के आस पास का क्षेत्र को सेब का पैतृक घर माना जाता है, और जंगली मालुस सिवेर्सि को सेब के पूर्वज होने का संभावित उम्मीदवार माना जाता है। ); @@ -79,7 +79,7 @@ h3, p { margin: 5px 0px; } -शुरुआत में दोनों `Panel`s की `isActive` state `false` है, इसलिए दोनों collapsed दिख रहे हैं +शुरुआत में दोनों `Panel`s की `isActive` state `false` है, इसलिए दोनों कोलैप्स्ड दिख रहे हैं @@ -137,10 +137,10 @@ export default function Accordion() { <>

Almaty, Kazakhstan

- With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city. + २० लाख की आबादी के साथ, अलमाती कज़ख़िस्तान का सबसे बड़ा शहर है। १९२९ से १९९७ तक, वह उसकी राजधानी थी। - The name comes from алма, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple. + यह नाम алма से आता है, जो "सेब" का कज़ाख शब्द है और अक्सर "सेब से भरपूर" में अनुवाद करता है। असल में, अलमाती के आस पास का क्षेत्र को सेब का पैतृक घर माना जाता है, और जंगली मालुस सिवेर्सि को सेब के पूर्वज होने का संभावित उम्मीदवार माना जाता है। ); @@ -222,14 +222,14 @@ export default function Accordion() { isActive={activeIndex === 0} onShow={() => setActiveIndex(0)} > - With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city. + २० लाख की आबादी के साथ, अलमाती कज़ख़िस्तान का सबसे बड़ा शहर है। १९२९ से १९९७ तक, वह उसकी राजधानी थी। setActiveIndex(1)} > - The name comes from алма, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple. + यह नाम алма से आता है, जो "सेब" का कज़ाख शब्द है और अक्सर "सेब से भरपूर" में अनुवाद करता है। असल में, अलमाती के आस पास का क्षेत्र को सेब का पैतृक घर माना जाता है, और जंगली मालुस सिवेर्सि को सेब के पूर्वज होने का संभावित उम्मीदवार माना जाता है। ); From ba5546a6e478cc3a5d53c57bf823d11aed96ad0a Mon Sep 17 00:00:00 2001 From: BryanRonad Date: Wed, 14 Sep 2022 21:12:09 +0530 Subject: [PATCH 04/10] Incorporating changes --- .../learn/sharing-state-between-components.md | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/beta/src/pages/learn/sharing-state-between-components.md b/beta/src/pages/learn/sharing-state-between-components.md index 0e5b4ffe7..4666d4360 100644 --- a/beta/src/pages/learn/sharing-state-between-components.md +++ b/beta/src/pages/learn/sharing-state-between-components.md @@ -53,7 +53,7 @@ export default function Accordion() { <>

Almaty, Kazakhstan

- २० लाख की आबादी के साथ, अलमाती कज़ख़िस्तान का सबसे बड़ा शहर है। १९२९ से १९९७ तक, वह उसकी राजधानी थी। + 20 लाख की आबादी के साथ, अलमाती कज़ख़िस्तान का सबसे बड़ा शहर है। 1929 से 1997 तक, वह उसकी राजधानी थी। यह नाम алма से आता है, जो "सेब" का कज़ाख शब्द है और अक्सर "सेब से भरपूर" में अनुवाद करता है। असल में, अलमाती के आस पास का क्षेत्र को सेब का पैतृक घर माना जाता है, और जंगली मालुस सिवेर्सि को सेब के पूर्वज होने का संभावित उम्मीदवार माना जाता है। @@ -91,17 +91,17 @@ h3, p { margin: 5px 0px; } -**मान लीजिये यदि आप बदलाव के तौर पर चाहते हैं कि एक समय में सिर्फ एक ही Panel expand हो।** इस डिजाईन के मुताबिक़ एक पैनल के expand होने पर दूसरा collapse होना चाहिये। तो ये कैसे कर पाएंगे? +**मान लीजिये यदि आप बदलाव के तौर पर चाहते हैं कि एक समय में सिर्फ एक ही पैनल एक्सपैंड हो।** इस डिजाईन के मुताबिक़ एक पैनल के एक्सपैंड होने पर दूसरा कोलैप्स होना चाहिये। तो ये कैसे कर पाएंगे? -इन दोनों Panels को संचालित करने के लिए, आपको तीन चरणों में इनके "state को लिफ्ट अप" करके इन्हें पैरेंट कौम्पोनॅन्ट में लाना होगा: +इन दोनों पेनल्स को संचालित करने के लिए, आपको तीन चरणों में इनके "state को लिफ्ट अप" करके इन्हें पैरेंट कौम्पोनॅन्ट में लाना होगा: 1. चाइल्ड कौम्पोनॅन्ट में से state को **हटाना**। 2. कॉमन पैरेंट में से हार्ड कोड किया हुआ डाटा **पास** करना। -3. कॉमन पैरेंट में state को फिर से **जोड़ कर** उसे event-handler के साथ पास करना। +3. कॉमन पैरेंट में state को फिर से **ऐड करके** उसे event-handler के साथ पास करना। -ऐसा करने से `Accordion` कौम्पोनॅन्ट दोनों `Panel`s को संचालित कर पायेगा और एक समय में उनमें से एक ही expand होगा। +ऐसा करने से `Accordion` कौम्पोनॅन्ट दोनों `Panel`s को संचालित कर पायेगा और एक समय में उनमें से एक ही एक्सपैंड होगा। -### चरण १: चाइल्ड कौम्पोनॅन्ट में से state निकालना {/*step-1-remove-state-from-the-child-components*/} +### स्टेप 1: चाइल्ड कौम्पोनॅन्ट में से state निकालना {/*step-1-remove-state-from-the-child-components*/} आप `Panel` के `isActive` का कण्ट्रोल उसके पैरेंट कौम्पोनॅन्ट को देंगे। इसका मतलब है कि पैरेंट कौम्पोनॅन्ट `isActive` को `Panel` तक एक prop की तरह पास करेगा। आप `Panel` कौम्पोनॅन्ट से **यह लाइन हटाने** से शुरुआत कर सकते हैं: @@ -115,17 +115,17 @@ const [isActive, setIsActive] = useState(false); function Panel({ title, children, isActive }) { ``` -अब `Panel` का पैरेंट कौम्पोनॅन्ट `isActive` को [prop की तरह पास कर](/learn/passing-props-to-a-component) के _नियंत्रित_ कर पायेगा। ठीक इसके विपरीत, अब `Panel` कौम्पोनॅन्ट का `isActive` की वैल्यू पर कोई _नियंत्रित नहीं_ रह जायेगा--ये अब पैरेंट कौम्पोनॅन्ट पर निर्भर है! +अब `Panel` का पैरेंट कौम्पोनॅन्ट `isActive` को [prop की तरह पास कर](/learn/passing-props-to-a-component) के *नियंत्रित* कर पायेगा। ठीक इसके विपरीत, अब `Panel` कौम्पोनॅन्ट के `isActive` की वैल्यू पर कोई *नियंत्रित नहीं* रह जायेगा--ये अब पैरेंट कौम्पोनॅन्ट पर निर्भर है! -### चरण २: कॉमन पैरेंट कौम्पोनॅन्ट से हार्ड कोडेड डाटा को पास करना {/*step-2-pass-hardcoded-data-from-the-common-parent*/} +### स्टेप 2: कॉमन पैरेंट कौम्पोनॅन्ट से हार्ड कोडेड डाटा को पास करना {/*step-2-pass-hardcoded-data-from-the-common-parent*/} -अब state को लिफ्ट अप करने के लिए आपको उस निकटतम कॉमन पैरेंट कौम्पोनॅन्ट का पता लगाना है, जो उन _दोनों_ चाइल्ड कौम्पोनॅन्ट का पैरेंट है जिन्हें आप संचालित करना चाहते हैं: +अब state को लिफ्ट अप करने के लिए आपको उस निकटतम कॉमन पैरेंट कौम्पोनॅन्ट का पता लगाना है, जो उन *दोनों* चाइल्ड कौम्पोनॅन्ट का पैरेंट है जिन्हें आप संचालित करना चाहते हैं: -* `Accordion` _(निकटतम कॉमन पैरेंट)_ +* `Accordion` *(निकटतम कॉमन पैरेंट)* - `Panel` - `Panel` -इस उदाहरण में, यह Accordion कौम्पोनॅन्ट है। चूँकि यह दोनों panels के उपर है और उनके props को कंट्रोल कर सकता है, इसलिए यह अब ये वर्तमान में एक्टिव panel के लिए एक "सोर्स ऑफ़ truth" बन जायेगा। अब `Accordion` कौम्पोनॅन्ट से, दोनों panels की तरफ `isActive` की एक हार्ड कोडेड वैल्यू पास करवाएं (उदाहरण के लिए, `true`): +इस उदाहरण में, यह `Accordion` कौम्पोनॅन्ट है। चूँकि यह दोनों पेनल्स के उपर है और उनके props को कंट्रोल कर सकता है, इसलिए यह अब ये वर्तमान में एक्टिव पैनल के लिए एक "सोर्स ऑफ़ ट्रुथ" बन जायेगा। अब `Accordion` कौम्पोनॅन्ट से, दोनों पेनल्स की तरफ `isActive` की एक हार्ड कोडेड वैल्यू पास करवाएं (उदाहरण के लिए, `true`): From 2104d37c53f13ff74d01568643b8dcdfd9495443 Mon Sep 17 00:00:00 2001 From: BryanRonad Date: Thu, 22 Sep 2022 20:05:29 +0530 Subject: [PATCH 05/10] Incorporating changes --- .../pages/learn/sharing-state-between-components.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/beta/src/pages/learn/sharing-state-between-components.md b/beta/src/pages/learn/sharing-state-between-components.md index 4666d4360..eb78939b7 100644 --- a/beta/src/pages/learn/sharing-state-between-components.md +++ b/beta/src/pages/learn/sharing-state-between-components.md @@ -56,7 +56,7 @@ export default function Accordion() { 20 लाख की आबादी के साथ, अलमाती कज़ख़िस्तान का सबसे बड़ा शहर है। 1929 से 1997 तक, वह उसकी राजधानी थी। - यह नाम алма से आता है, जो "सेब" का कज़ाख शब्द है और अक्सर "सेब से भरपूर" में अनुवाद करता है। असल में, अलमाती के आस पास का क्षेत्र को सेब का पैतृक घर माना जाता है, और जंगली मालुस सिवेर्सि को सेब के पूर्वज होने का संभावित उम्मीदवार माना जाता है। + यह नाम алма से आता है, जो "सेब" का कज़ाख शब्द है और अक्सर "सेब से भरपूर" में अनुवाद करता है। असल में, अलमाती के आस पास के क्षेत्र को सेब का पैतृक घर माना जाता है, और जंगली Malus sieversii को सेब के पूर्वज होने का संभावित उम्मीदवार माना जाता है। ); @@ -137,10 +137,10 @@ export default function Accordion() { <>

Almaty, Kazakhstan

- २० लाख की आबादी के साथ, अलमाती कज़ख़िस्तान का सबसे बड़ा शहर है। १९२९ से १९९७ तक, वह उसकी राजधानी थी। + 20 लाख की आबादी के साथ, अलमाती कज़ख़िस्तान का सबसे बड़ा शहर है। 1929 से 1997 तक, वह उसकी राजधानी थी। - यह नाम алма से आता है, जो "सेब" का कज़ाख शब्द है और अक्सर "सेब से भरपूर" में अनुवाद करता है। असल में, अलमाती के आस पास का क्षेत्र को सेब का पैतृक घर माना जाता है, और जंगली मालुस सिवेर्सि को सेब के पूर्वज होने का संभावित उम्मीदवार माना जाता है। + यह नाम алма से आता है, जो "सेब" का कज़ाख शब्द है और अक्सर "सेब से भरपूर" में अनुवाद करता है। असल में, अलमाती के आस पास के क्षेत्र को सेब का पैतृक घर माना जाता है, और जंगली Malus sieversii को सेब के पूर्वज होने का संभावित उम्मीदवार माना जाता है। ); @@ -205,7 +205,7 @@ const [activeIndex, setActiveIndex] = useState(0); ``` -`Panel` के अंदर का `
{food.name} {food.description}