` একটি প্রথম চাইল্ড্ হিসাবে। রিয়েক্ট এর দৃষ্টিতে, এই দুটি কাউন্টার একই "ঠিকানায়" আছে: এটি মূল রুটের প্রথম চাইল্ড্-এর প্রথম চাইল্ড্। এটি রিয়েক্টের পূর্ববর্তী এবং পরবর্তী রেন্ডার মধ্যে তাদের মিলাতে সমান করে। এটি আপনি যদি আপনার লজিক কেমন বিন্যাস করুন না কেন।
+
-## Different components at the same position reset state {/*different-components-at-the-same-position-reset-state*/}
+## একই অবস্থানে বিভিন্ন কম্পোনেন্টগুলি স্টেট রিসেট করে {/*different-components-at-the-same-position-reset-state*/}
-In this example, ticking the checkbox will replace `
` with a ``:
+এই উদাহরণে, চেকবক্স চিহ্নিত করলে `` এর স্থানে `` যুক্ত হবে:
@@ -577,13 +579,13 @@ label {
-Here, you switch between _different_ component types at the same position. Initially, the first child of the `
` contained a `Counter`. But when you swapped in a `p`, React removed the `Counter` from the UI tree and destroyed its state.
+এখানে, আপনি একই অবস্থানে বিভিন্ন ধরণের কম্পোনেন্ট পরিবর্তন করেন। প্রাথমিকভাবে, `
` এর প্রথম চাইল্ড্-টির মধ্যে একটি `Counter` ছিল। But when you swapped in a `p`, React removed the `Counter` from the UI tree and destroyed its state. কিন্তু p কে স্থানান্তরিত করার সময়, React কাউন্টারটিকে UI-ট্রি থেকে সরে নিয়েছে এবং এর স্টেট ধ্বংস করেছে।
-When `Counter` changes to `p`, the `Counter` is deleted and the `p` is added
+যখন `Counter` পরিবর্তন হয়ে `p` হয়, তখন `Counter` মুছে যায় এবং `p` যুক্ত হয়।
@@ -593,13 +595,13 @@ When `Counter` changes to `p`, the `Counter` is deleted and the `p` is added
-When switching back, the `p` is deleted and the `Counter` is added
+পুনরায় পরিবর্তন করার সময়, `p` মুছে যায় এবং `Counter` যুক্ত হয়।
-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:
+**যখন একই অবস্থানে একটি নতুন কম্পোনেন্ট রেন্ডার করা হয়, তখন এর সম্পূর্ণ উপপাদ্যের স্টেট রিসেট হয়।** এটি কার্যকর হওয়ার পদ্ধতি দেখতে একটি উদাহরণে, কাউন্টার সংখ্যা বাড়ান এবং তারপরে চেকবক্স চিহ্নিত করুন:
@@ -688,13 +690,14 @@ label {
-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.
+চেকবক্স ক্লিক করার সময় কাউন্টারের স্টেট রিসেট হয়। যদিও আপনি একটি `Counter` রেন্ডার করেন, কিন্তু `div` এর প্রথম চাইল্ড্ পরিবর্তন হয়, যা একটি `section` হয়ে যায়। যখন DOM থেকে চাইল্ড্ `div` সরানো হয়, তখন তার নীচের সমস্ত ট্রি (যথায়থ `Counter` এবং এর স্টেটসহ) ধ্বংস হয়ে যায়।
+
-When `section` changes to `div`, the `section` is deleted and the new `div` is added
+`section` থেকে `div` এ পরিবর্তন হলে, `section` মুছে যায় এবং নতুন `div` যুক্ত হয়।
@@ -704,19 +707,19 @@ When `section` changes to `div`, the `section` is deleted and the new `div` is a
-When switching back, the `div` is deleted and the new `section` is added
+পুনরায় পরিবর্তন করার সময়, `div` মুছে যায় এবং নতুন `section` যুক্ত হয়
-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.
+একটি নির্দিষ্ট নিয়ম হিসাবে ধরা যায় **যদি আপনি পুনরায় রেন্ডার মাধ্যমে স্টেটকে সংরক্ষণ রাখতে চান তবে আপনার ট্রির গঠনটি পুনরায় রেন্ডার থেকে একে অন্যকে "মিলানো" প্রয়োজন।** যদি গঠন ভিন্ন হয়, তবে স্টেটটি ধ্বংস করা হয় কারণ React একটি কম্পোনেন্টকে ট্রি থেকে সরানোর সময় স্টেট ধ্বংস করে।
-This is why you should not nest component function definitions.
+এটা হলো কারণ আপনাকে কম্পোনেন্ট ফাংশনের সংজ্ঞা নেস্ট করা উচিত নয়।
-Here, the `MyTextField` component function is defined *inside* `MyComponent`:
+এখানে, `MyTextField` কম্পোনেন্ট ফাংশনটি `MyComponent` এর মধ্যে সংজ্ঞায়িত করা হয়েছে:
@@ -751,13 +754,14 @@ export default function MyComponent() {
-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.**
+বাটন ক্লিক প্রতিটি সময়ে, ইনপুট স্টেট মুছে যায়! এটি হলো কারণ প্রতিটি `MyComponent` রেন্ডারের জন্য একটি *ভিন্ন* `MyTextField` ফাংশন তৈরি হয়। আপনি একই অবস্থানে ভিন্ন কম্পোনেন্ট রেন্ডার করছেন, তাই React সমস্ত স্টেট রিসেট করে। এটি বাগ এবং কার্যক্ষমতা সমস্যার কারণ হয়। এই সমস্যা সমাধানের জন্য, **সবসময় কম্পোনেন্ট ফাংশনগুলি শীর্ষ-স্তরে ঘোষণা করুন এবং তাদের সংজ্ঞায়িতি নেস্ট না করুন।**
+
-## Resetting state at the same position {/*resetting-state-at-the-same-position*/}
+## একই অবস্থানে স্টেট রিসেট করা {/*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:
+ডিফল্ট অবস্থানে থাকলে রিয়েক্ট কম্পোনেন্টের স্টেট সংরক্ষণ রাখে। সাধারণতঃ, এটি আপনি চান তাই এটি ডিফল্ট আচরণ হিসাবে সুসংগত। কিন্তু কখনও কখনও, আপনি কম্পোনেন্টের স্টেট রিসেট করতে চান হতে পারেন। একটি অ্যাপটি চিন্তা করুন যা দুটি খেলোয়াড় অপরপরের স্কোরগুলি পর্যালোচনা করতে দেয় প্রতিটি টার্নে:
@@ -827,19 +831,19 @@ h1 {
-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` একই অবস্থানে দেখা যায়, তাই রিয়েক্ট তাদের *একই* `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.
+তবে ধারণাগতভাবে, এই অ্যাপে তাদের দুটি পৃথক কাউন্টার হওয়া উচিত। তারা ইউআইতে একই জায়গায় দেখা যাতে পারে, কিন্তু একটি টেলরের জন্য একটি কাউন্টার এবং অন্যটি সারাহের জন্য একটি কাউন্টার।
-There are two ways to reset state when switching between them:
+এখানে দুটি উপায় আছে যখন তাদের মধ্যে স্থানান্তর করা হয়, স্টেট রিসেট করতে:
-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*/}
+### অপশন ১: কম্পোনেন্টটি বিভিন্ন অবস্থানে রেন্ডার করা {/*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` কে স্বাধীন রাখতে চান, তবে আপনি তাদের দুটি ভিন্ন অবস্থানে রেন্ডার করতে পারেন:
@@ -910,42 +914,42 @@ h1 {
-* 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` স্টেট থাকে এবং দ্বিতীয়টি খালি থাকে।
+* আপনি "Next Player" বাটনটি চাপানোর পরে প্রথম অবস্থানটি খালি হয়ে যায় কিন্তু দ্বিতীয় অবস্থানটি এখন একটি Counter ধারণ করে।
-Initial state
+প্রাথমিক স্টেট
-Clicking "next"
+"next" বাটনটি চাপালে
-Clicking "next" again
+আবার "next" বাটনটি চাপালে
-Each `Counter`'s state gets destroyed each time its removed from the DOM. This is why they reset every time you click the button.
+প্রতিটি `Counter` এর স্টেট প্রতিবার 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.
+এই সমাধানটি সুবিধাজনক যখন আপনার একই স্থানে কয়েকটি স্বতন্ত্র কম্পোনেন্ট রেন্ডার করা হয়। এই উদাহরণে আপনার কেবল দুটি কম্পোনেন্ট আছে, তাই JSX এ উভয়কে পৃথক ভাবে রেন্ডার করা একটি ঝামেলা নয়।
### Option 2: Resetting state with a key {/*option-2-resetting-state-with-a-key*/}
-There is also another, more generic, way to reset a component's 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` গুলি যখন [তালিকা রেন্ডার করা হয়।](/learn/rendering-lists#keeping-list-items-in-order-with-key) কীগুলি শুধুমাত্র তালিকার জন্য নয়! আপনি কীগুলি ব্যবহার করে রিয়েক্টকে যেকোনো কম্পোনেন্টগুলি পৃথক করতে ব্যবহার করতে পারেন। ডিফল্টভাবে, রিয়েক্ট অর্ডার ব্যবহার করে প্যারেন্টের মধ্যে ("প্রথম কাউন্টার", "দ্বিতীয় কাউন্টার") কম্পোনেন্টগুলি পৃথক করতে। কিন্তু কীগুলি আপনাকে বলতে দিয়ে দিতে পারে যে এটি শুধুমাত্র একটি *প্রথম* কাউন্টার নয়, অথবা *দ্বিতীয়* কাউন্টার নয়, বরং একটি নির্দিষ্ট কাউন্টার - উদাহরণস্বরূপ, *টেইলরের* কাউন্টার। এই ভাবে, রিয়েক্ট জানতে পারবে যে যেখানে এটি প্রদর্শিত হয়, সেখানে *টেইলরের* কাউন্টার!
-In this example, the two `
`s don't share state even though they appear in the same place in JSX:
+এই উদাহরণে, প্রদর্শিত হলেও দুটি `
` সমস্ত অবস্থানে স্টেট ভাগ করে না:
@@ -1015,7 +1019,7 @@ h1 {
-Switching between Taylor and Sarah does not preserve the state. This is because **you gave them different `key`s:**
+টেইলর এবং সারাহের মধ্যে স্টেট সংরক্ষিত থাকলেও স্থিতিশীল রাখা হয়না। এটি কারণ **আপনি তাদের জন্য ভিন্ন `key` দিয়েছেন:**
```js
{isPlayerA ? (
@@ -1025,19 +1029,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` নির্দিষ্ট করা রিয়েক্টকে বলে দেয় যে এটি স্থানের একটি অংশ হিসাবে ব্যবহার করবে, প্যারেন্টের অর্ডারের পরিবর্তে। এটি কারণেই, যখনই আপনি তাদের একই স্থানে JSX এ রেন্ডার করেন, রিয়েক্ট তাদের দুটি পৃথক কাউন্টার হিসাবে ধরে নেয়। সুতরাং, তারা কখনই স্টেট ভাগ করবে না। যেখানেই একটি কাউন্টার পর্যালোচনা করা হয়, তার স্টেট তৈরি হয়। যেকোনো সময় যখন এটি অপসারিত হয়, তখন এর স্টেট ধ্বংস হয়ে যায়। তাদের মধ্যে টগলিং করা হলে বারবার তাদের স্টেট রিসেট হয়।
-Remember that keys are not globally unique. They only specify the position *within the parent*.
+মনে রাখবেন যে কীগুলি গ্লোবালী অনন্য নয়। তারা কেবল *প্যারেন্টের মধ্যে অবস্থান নির্দিষ্ট করে*
-### Resetting a form with a key {/*resetting-a-form-with-a-key*/}
+### একটি কী ব্যবহার করে ফর্ম রিসেট করা {/*resetting-a-form-with-a-key*/}
-Resetting state with a key is particularly useful when dealing with forms.
+ফর্ম সম্পর্কে কথা বলার সময় কী ব্যবহার করে স্টেট রিসেট করা অত্যন্ত উপযুক্ত।
-In this chat app, the `
` component contains the text input state:
+এই চ্যাট অ্যাপে, `` কম্পোনেন্টটিতে টেক্সট ইনপুট স্টেট রয়েছে।:
@@ -1132,17 +1136,17 @@ textarea {
-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 `` is rendered at the same position in the tree.
+ইনপুটে কিছু লিখে প্রেস করুন এবং তারপর "আলিস" বা "বব" এ প্রেস করুন যাতে আপনি একটি পৃথক প্রাপক প্রেস করতে পারেন। আপনি দেখবেন যে ইনপুট স্টেট সংরক্ষিত থাকে কারণ `` একই অবস্থানে ট্রি রেন্ডার করা হয়।
-**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
```
-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` কম্পোনেন্টটি পুনরায় সৃষ্টি হবে, নিচের ট্রির কোনো স্থিতির সাথে স্ক্র্যাচ থেকে নতুন স্থানে। রিয়েক্ট এটিও পুনরায় DOM উপাদানগুলি সৃষ্টি করবে, ব্যবহার করার পরিবর্তে।
-Now switching the recipient always clears the text field:
+এখন প্রাপক পরিবর্তন করলে সর্বদা টেক্সট ফিল্ড পরিষ্কার হয়:
@@ -1239,24 +1243,25 @@ textarea {
-#### Preserving state for removed components {/*preserving-state-for-removed-components*/}
+#### অপসারিত কম্পোনেন্টগুলির জন্য স্টেট সংরক্ষণ করা {/*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:
+একটি প্রাসঙ্গিক চ্যাট অ্যাপে, আপনি সম্ভবত পূর্ববর্তী প্রাপকটি আবার নির্বাচন করলে ইনপুট স্টেট পুনরুদ্ধার করতে চান। একটি দৃষ্টিগোচর নয় কোম্পোনেন্টের জন্য স্টেটকে "সজীব" রাখতে কিছু উপায় আছে:
-- 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 দ্বারা লুকিয়ে রাখবেন। চ্যাটগুলি ট্রি থেকে অপসারিত হবেনা, তাই তাদের স্থানীয় স্টেটটি সংরক্ষিত থাকবে। এই সমাধানটি সাধারণ UI এর জন্য বিশেষভাবে ভালো কাজ করে। কিন্তু যদি লুকিয়ে রাখা ট্রি বড় হয় এবং বহুগুণ DOM নোড ধারণ করে, তবে এটি খুব নিউনতম হতে পারে।
+- আপনি [স্টেটটি উপরে উঠিয়ে তুলতে পারেন](/learn/sharing-state-between-components) এবং প্রতিটি প্রাপকের জন্য মাতৃক কম্পোনেন্টে মুল্য রাখতে পারেন। এই ভাবে, যখন শিশু কম্পোনেন্টগুলি অপসারিত হয়, তখন এটি ব্যাপার নেই, কারণ প্যারেন্টটি গুরুত্বপূর্ণ তথ্য রাখে। এটি সবচেয়ে সাধারণ সমাধান।
+- আপনি আপাতত রিয়েক্ট স্টেটের পাশাপাশি অতিরিক্ত একটি উৎস ব্যবহার করতে পারেন। উদাহরণস্বরূপ, ব্যবহারকারী যদি দুর্ঘটনাপূর্বক পৃষ্ঠাটি বন্ধ করে তবে মেসেজ ড্রাফটটি ধ্বংস না হয়। এটি সম্পাদন করতে, আপনি `Chat` কম্পোনেন্টটির স্টেটকে [`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 `` tree based on the current recipient.
+আপনি যে কোনটি ব্যবহার করুন, অলিসের সাথে একটি চ্যাট অ্যাপ সংজ্ঞায়িতভাবে বিচক্ষণ একটি চ্যাট থেকে ভিন্ন, তাই বর্তমান প্রাপকের উপর ভিত্তি করে `` ট্রির জন্য একটি `key` দেওয়া যায়।
-- 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 স্টেটটি সম্পর্কিত কম্পোনেন্ট সমান অবস্থানে রেন্ডার হওয়ার সময় পর্যন্ত স্টেটটিকে
+ সংরক্ষণ করে রাখে।
+- স্টেট JSX ট্যাগগুলিতে রাখা হয় না। এটি আপনি যে স্থানে JSX ট্যাগটি রাখেন সেই ট্রির অবস্থার সাথে সংযুক্ত হয়।
+- আপনি একটি সাবট্রি কে পুনরায় স্থাপন করতে পারেন তার স্থিতিকে পুনরায় স্থাপন করার জন্য একটি নতুন কী দিয়ে।
+- কম্পোনেন্ট ডেফিনিশন নেস্ট করবেন না, অন্যথায় আপনি কাছাকাছি স্টেট পুনরায় স্থাপন করতে পারেন।
@@ -1264,9 +1269,9 @@ No matter which strategy you pick, a chat _with Alice_ is conceptually distinct
-#### 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.
+এই উদাহরণে আপনি বাটন চাপার সময় একটি বার্তা প্রদর্শন করেন। তবে, বাটন চাপার সাথে সাথেই ইনপুট ভুলভাবে পুনরায় স্থাপন হয়ে যায়। কেন এটা ঘটছে? এটিকে ঠিক করুন যাতে বাটন চাপার মাধ্যমে ইনপুট পাঠ্যটি পুনরায় স্থাপন না হয়।
@@ -1315,9 +1320,9 @@ textarea { display: block; margin: 10px 0; }
-The problem is that `Form` is rendered in different positions. In the `if` branch, it is the second child of the ``, 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` শাখায় এটি `
` এর দ্বিতীয় চাইল্ড্ হয়, কিন্তু `else` শাখায় এটি প্রথম চাইল্ড্ হয়। সুতরাং, প্রতিটি অবস্থানে কম্পোনেন্টের প্রকার পরিবর্তন হয়। প্রথম অবস্থানটি একটি `p` এবং `Form` ধারণ করার মধ্যে পরিবর্তন করে, যখন দ্বিতীয় অবস্থানটি একটি `Form` এবং `button` ধারণ করার মধ্যে পরিবর্তন করে। রিয়েক্ট প্রতিবার কম্পোনেন্টের প্রকার পরিবর্তন হওয়ায় স্টেট পুনরায় স্থাপন করে।
-The easiest solution is to unify the branches so that `Form` always renders in the same position:
+সহজতম সমাধানটি হলো শাখাগুলি একই অবস্থায় `Form` রেন্ডার করতে সংযোগ করা।:
@@ -1363,7 +1368,7 @@ textarea { display: block; margin: 10px 0; }
-Technically, you could also add `null` before `
` in the `else` branch to match the `if` branch structure:
+কাঠামোর দৃষ্টিকোণ থেকে, আপনি যেহেতু `
` এর আগে একটি `null` যুক্ত করতে পারেন তা দিয়েও সমাধান সম্ভব। এটি `if` শাখার কাঠামোর সাথে মেলানোর জন্য সাহায্য করবে:
@@ -1411,19 +1416,19 @@ textarea { display: block; margin: 10px 0; }
-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` সর্বদা দ্বিতীয় চাইল্ড্ হয়ে থাকে, তাই সে একই অবস্থায় থাকে এবং তার স্টেটটি বজায় রাখে। কিন্তু এই পদ্ধতিটি অন্যান্যদের জন্য অন্যতম স্পষ্ট নয় এবং এটি একটি ঝুঁকি তৈরি করে যে কেউ ঐ `null` অংশটি সরাবলে।
-#### 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.
+এটি সাম্প্রতিকতঃ কাজ করছে, তবে একটি বাগ রয়েছে। যখন আপনি "প্রথম নাম" ইনপুট পূর্ণ করে এবং চেকবক্স চিহ্নিত করেন, তখন টেক্সটটি প্রথম ইনপুটে (যা এখন "শেষ নাম") থাকবে। এটি সংশোধন করুন যাতে আপনি অর্ডার প্রতিবদ্ধ করলে ইনপুট টেক্সটও *সরাসরি* স্থানান্তর করতে পারে।
-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 কে বোঝানো যাবে যে রিই-রেন্ডার এর মাজখানে স্টেট ম্যাচ করা যায়ে ?
@@ -1487,7 +1492,7 @@ label { display: block; margin: 10px 0; }
-Give a `key` to both `` components in both `if` and `else` branches. This tells React how to "match up" the correct state for either `` even if their order within the parent changes:
+উভয় `if` এবং `else` শাখাগুলিতে উভয় `` কম্পোনেন্টের জন্য একটি `key` দিন।এটি রিয়েক্টকে বলে দেয় যে যদি প্যারেন্টের ভিতরের ক্রম পরিবর্তিত হয়ে থাকুক, তাহলেও উভয় `` এর জন্য *সঠিক* স্টেট মিলাতে হবে।:
@@ -1549,11 +1554,11 @@ label { display: block; margin: 10px 0; }
-#### 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.
+এটি একটি সম্পাদনযোগ্য যোগাযোগ তালিকা। আপনি নির্বাচিত যোগাযোগের বিশদগুলি সম্পাদনা করতে পারেন এবং তারপরে "Save" বাটনটি চাপুন যদি আপডেট করতে চান বা "Reset" বাটনটি চাপুন যদি আপনার পরিবর্তনগুলি বাতিল করতে চান।
-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.
+যখন আপনি একটি নতুন যোগাযোগ নির্বাচন করেন (উদাহরণস্বরূপ, এলিস), স্টেট আপডেট হয়, কিন্তু ফর্মটি পূর্বের যোগাযোগের বিশদগুলি প্রদর্শন করে। নির্বাচিত যোগাযোগ পরিবর্তন হলে ফর্মটি রিসেট হওয়ার জন্য এটা ঠিক করুন।
@@ -1705,7 +1710,7 @@ button {
-Give `key={selectedId}` to the `EditContact` component. This way, switching between different contacts will reset the form:
+সম্পাদনা করুন `EditContact` কম্পোনেন্টে একটি `key={selectedId}` দিন। এই ভাবে, পাত্র পরিবর্তন করলে ফর্মটি রিসেট হবে।:
@@ -1858,13 +1863,13 @@ button {
-#### 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 `![]()
` 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.
+"Next" বাটনটি চাপ দিলে ব্রাউজার পরবর্তী ইমেজ লোড করতে শুরু করে। তবে, ডিফল্ট অবস্থায় এটি একই `![]()
` ট্যাগে প্রদর্শিত হয়, তাই আপনি পরবর্তীটি লোড হওয়া পর্যন্ত পূর্বের ইমেজটি দেখতেই থাকবেন। এটি অপ্রাসঙ্গিক হতে পারে যদি টেক্সটটি সর্বদা ইমেজের সাথে মিলে যাওয়া প্রয়োজনীয়। "Next" বাটনটি চাপ দিলে, তাড়াতাড়ি পূর্ববর্তী ইমেজটি ক্লিয়ার হয়ে যাবে।
-Is there a way to tell React to re-create the DOM instead of reusing it?
+রিঅ্যাক্টকে এটি পুনঃব্যবহারের পরিবর্তে DOM পুনরায় তৈরি করতে বলার কোন উপায় আছে কি?
@@ -1934,7 +1939,7 @@ img { width: 150px; height: 150px; }
-You can provide a `key` to the `![]()
` tag. When that `key` changes, React will re-create the `![]()
` 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.
+আপনি `![]()
` ট্যাগের জন্য একটি `key` সরবরাহ করতে পারেন। যখন ঐ `key` পরিবর্তন হয়, তখন রিয়েক্ট `![]()
` ডোম নোডটি পুনর্সৃষ্টি করবে। এটি প্রতিটি ইমেজের লোড হওয়ার সময় একটি সংক্ষেপ ফ্ল্যাশ উত্পন্ন করে, তাই এটি আপনার অ্যাপ্লিকেশনের প্রতিটি ইমেজের জন্য করতে চান না। তবে এটি সম্ভবত সম্ভাব্যতঃ যদি আপনি নিশ্চিত করতে চান যে ইমেজ সর্বদা টেক্সটের সাথে মেলে।
@@ -2002,11 +2007,11 @@ img { width: 150px; height: 150px; }
-#### Fix misplaced state in the list {/*fix-misplaced-state-in-the-list*/}
+#### তালিকায় ভুল অবস্থানে রাখা স্টেট ঠিক করুন {/*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` একটি স্টেট রাখে যা নির্ধারণ করে যে কি "Show Email" এর জন্য প্রেস করা হয়েছে। এলিসের জন্য "Show Email" চাপুন এবং তারপরে "Show in reverse order" চেকবক্সটি চেক করুন। আপনি লক্ষ্য করবেন যে এটি _টেলরের_ ইমেল যা এখন প্রসারিত হয়েছে, কিন্তু অ্যালিসের-- যা নীচে চলে গেছে-- ভেঙে পড়েছে বলে মনে হচ্ছে।
-Fix it so that the expanded state is associated with each contact, regardless of the chosen ordering.
+এটি ঠিক করুন যাতে প্রসারিত অবস্থা প্রতিটি পরিচিতির সাথে যুক্ত থাকে, নির্বাচিত আদেশ নির্বিশেষে।
@@ -2096,16 +2101,16 @@ button {
-The problem is that this example was using index as a `key`:
+সমস্যা হল যে এই উদাহরণটি একটি `key` হিসাবে সূচক ব্যবহার করছে:
```js
{displayedContacts.map((contact, i) =>
```
-However, you want the state to be associated with _each particular contact_.
+যাইহোক, আপনি স্টেইট্কে _প্রত্যেকটি নির্দিষ্ট পরিচিতির_ সাথে যুক্ত করতে চান।
-Using the contact ID as a `key` instead fixes the issue:
+পরিবর্তে একটি `key` হিসাবে পরিচিতি কন্ট্যাক্ট্ আইডি ব্যবহার করে সমস্যাটি সমাধান করে:
@@ -2193,7 +2198,7 @@ button {
-State is associated with the tree position. A `key` lets you specify a named position instead of relying on order.
+স্টেটটি ট্রি অবস্থার সাথে সংযুক্ত হয়। `key` দ্বারা আপনি ক্রমে নির্ধারিত হতে অবস্থানের পরিবর্তে নামকরণ করতে পারেন।