diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 895d610d3..cec26a137 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -1,24 +1,30 @@
 ---
-title: Conditional Rendering
+title: رندر‌کردن شرطی
 ---
 
 <Intro>
 
-Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like `if` statements, `&&`, and `? :` operators.
+
+
+کامپوننت‌های شما معمولا بسته به شرایط مختلف نیاز به نمایش چیزهای مختلفی دارند. در ری‌اکت، می‌توانید ‌JSX را با سینتکس جاوااسکریپت با استفاده از دستوراتی مانند `if`،‌ `&&`،‌ و `? :` به صورت شرطی رندر کنید.
 
 </Intro>
 
+
 <YouWillLearn>
 
-* How to return different JSX depending on a condition
-* How to conditionally include or exclude a piece of JSX
-* Common conditional syntax shortcuts you’ll encounter in React codebases
+* نحوه برگرداندن JSX های مختلف بسته به یک شرط
+* نحوه گنجاندن یا حذف کردن شرطی یک قطعه از JSX
+* میانبرهای سینتکسی شرطی رایج که در کد‌های ری‌اکت با آنها مواجه خواهید شد
 
 </YouWillLearn>
 
-## Conditionally returning JSX {/*conditionally-returning-jsx*/}
 
-Let’s say you have a `PackingList` component rendering several `Item`s, which can be marked as packed or not:
+## برگرداندن شرطی JSX {/*conditionally-returning-jsx*/}
+
+
+
+فرض کنید یک کامپوننت `PackingList` دارید که چندین `Item` را رندر می‌کند، که می‌توان آن‌ها را به‌عنوان بسته‌بندی‌شده یا غیر بسته‌بندی‌شده علامت‌گذاری کرد:
 
 <Sandpack>
 
@@ -52,9 +58,11 @@ export default function PackingList() {
 
 </Sandpack>
 
-Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✔) to packed items if `isPacked={true}`.
 
-You can write this as an [`if`/`else` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) like so:
+توجه داشته باشید که برای برخی از کامپوننت‌های   props ،`isPacked` آن ها به جای true ،false  داده شده است. شما می‌خواهید اگر `isPacked={true}` باشد،  یک علامت (✔) به موارد بسته‌بندی شده اضافه کنید.
+
+می توانید این را به عنوان یک عبارت <span dir="ltr">[`if`/`else` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else)</span> بنویسید:
+
 
 ```js
 if (isPacked) {
@@ -63,7 +71,8 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
-If the `isPacked` prop is `true`, this code **returns a different JSX tree.** With this change, some of the items get a checkmark at the end:
+
+اگر prop `isPacked`،‌ `true` باشد، این کد **یک درخت JSX متفاوت را برمی‌گرداند.** با این تغییر، برخی از آیتم ها در انتها علامت چک‌مارک می‌گیرند:
 
 <Sandpack>
 
@@ -100,13 +109,19 @@ export default function PackingList() {
 
 </Sandpack>
 
-Try editing what gets returned in either case, and see how the result changes!
 
-Notice how you're creating branching logic with JavaScript's `if` and `return` statements. In React, control flow (like conditions) is handled by JavaScript.
+سعی کنید آنچه را که در هر کدام از حالت‌ها بازگردانده می شود ویرایش کنید و ببینید نتیجه چگونه تغییر می کند!
+
+به نحوه ایجاد منطق شاخه‌ای با دستورات `if` و `return` جاوا اسکریپت توجه کنید. در ری‌اکت، control flow (مانند شرایط) توسط جاوا اسکریپت مدیریت می شود.
+
+
 
-### Conditionally returning nothing with `null` {/*conditionally-returning-nothing-with-null*/}
+### برنگرداندن چیزی به صورت شرطی با `null` {/*conditionally-returning-nothing-with-null*/}
+
+
+
+در برخی شرایط، اصلاً نمی خواهید چیزی را رندر کنید. مثلاً وقتی اصلاً نمی‌خواهید موارد بسته‌بندی شده را نشان دهید. یک کامپوننت باید چیزی را برگرداند. در این مورد، می توانید `null` را برگردانید:
 
-In some situations, you won't want to render anything at all. For example, say you don't want to show packed items at all. A component must return something. In this case, you can return `null`:
 
 ```js
 if (isPacked) {
@@ -115,7 +130,9 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
-If `isPacked` is true, the component will return nothing, `null`. Otherwise, it will return JSX to render.
+
+اگر ‌true ،`isPacked`  باشد، کامپوننت چیزی را بر نمی‌گرداند، `null`. در غیر این صورت، JSX را برای رندر برمی گرداند.
+
 
 <Sandpack>
 
@@ -152,23 +169,31 @@ export default function PackingList() {
 
 </Sandpack>
 
-In practice, returning `null` from a component isn't common because it might surprise a developer trying to render it. More often, you would conditionally include or exclude the component in the parent component's JSX. Here's how to do that!
 
-## Conditionally including JSX {/*conditionally-including-jsx*/}
+در عمل، برگرداندن `null` از یک کامپوننت رایج نیست، زیرا ممکن است توسعه‌دهنده‌ای را که تلاش می‌کند آن را رندر کند، سورپرایز کند. بیشتر اوقات، شما به صورت شرطی کامپوننت را در JSX کامپوننت پدر قرار می دهید یا حذف می کنید. در اینجا نحوه انجام این کار آمده است!
+
 
-In the previous example, you controlled which (if any!) JSX tree would be returned by the component. You may already have noticed some duplication in the render output:
+
+## شامل‌شدن ‌JSX به صورت شرطی {/*conditionally-including-jsx*/}
+
+در مثال قبلی، شما کنترل کردید که کدام درخت JSX (در صورت وجود!) توسط کامپوننت بازگردانده شود. ممکن است قبلاً متوجه مقداری تکرار در خروجی رندر شده باشید:
 
 ```js
 <li className="item">{name} ✔</li>
 ```
 
-is very similar to
+
+
+بسیار مشابه است با
+
 
 ```js
 <li className="item">{name}</li>
 ```
 
-Both of the conditional branches return `<li className="item">...</li>`:
+
+هر دو شاخه شرطی `<li className="item">...</li>` را برمی‌گردانند:
+
 
 ```js
 if (isPacked) {
@@ -177,13 +202,20 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
-While this duplication isn't harmful, it could make your code harder to maintain. What if you want to change the `className`? You'd have to do it in two places in your code! In such a situation, you could conditionally include a little JSX to make your code more [DRY.](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)
 
-### Conditional (ternary) operator (`? :`) {/*conditional-ternary-operator--*/}
 
-JavaScript has a compact syntax for writing a conditional expression -- the [conditional operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) or "ternary operator".
+اگرچه این تکرار مضر نیست، اما می‌تواند نگهداری کد شما را سخت‌تر کند. اگر بخواهید `className` را تغییر دهید چه؟ شما باید این کار را در دو جا از کد خود انجام دهید! در چنین شرایطی، می‌توانید به صورت شرطی، کمی JSX اضافه کنید تا کدتان بیشتر [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) شود. 
+
+
+
+### عملگر شرطی (سه تایی) (`? :`) {/*conditional-ternary-operator--*/}
+
+
+
+جاوا اسکریپت یک سینتکس فشرده برای نوشتن یک عبارت شرطی دارد -- [عملگر شرطی](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) یا "عملگر سه تایی".
+
+به جای این:
 
-Instead of this:
 
 ```js
 if (isPacked) {
@@ -192,7 +224,9 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
-You can write this:
+
+می توانید این را بنویسید:
+
 
 ```js
 return (
@@ -202,17 +236,26 @@ return (
 );
 ```
 
-You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✔'`, otherwise (`:`) render `name`"*.
+
+
+شما می توانید آن را به صورت *"اگر `isPacked` درست است، سپس  (`?`) `name + ' ✔'` را رندر کنید، در غیر این صورت (`:`) `name` را اجرا کنید "*  بخوانید.
+
 
 <DeepDive>
 
-#### Are these two examples fully equivalent? {/*are-these-two-examples-fully-equivalent*/}
+#### آیا این دو مثال کاملاً معادل هستند؟ {/*are-these-two-examples-fully-equivalent*/}
+
+
+
+اگر از یک پس‌زمینه برنامه‌نویسی شی‌گرا می‌آیید، ممکن است فرض کنید که دو مثال بالا به طور ظاهری متفاوت هستند، زیرا یکی از آنها ممکن است دو "نمونه" متفاوت از `<li>` ایجاد کند. اما المنت‌های JSX "نمونه" نیستند زیرا هیچ حالت داخلی ندارند و نودهای  واقعی DOM نیستند. آنها توصیف های سبک وزن هستند، مانند blueprintها. بنابراین، این دو مثال، در واقع کاملاً معادل *هستند*. [نگهداری و بازنشانی وضعیت](/learn/preserving-and-resetting-state) به تفصیل درباره اینکه چگونه این، کار می‌کند توضیح می‌دهد.
 
-If you're coming from an object-oriented programming background, you might assume that the two examples above are subtly different because one of them may create two different "instances" of `<li>`. But JSX elements aren't "instances" because they don't hold any internal state and aren't real DOM nodes. They're lightweight descriptions, like blueprints. So these two examples, in fact, *are* completely equivalent. [Preserving and Resetting State](/learn/preserving-and-resetting-state) goes into detail about how this works.
 
 </DeepDive>
 
-Now let's say you want to wrap the completed item's text into another HTML tag, like `<del>` to strike it out. You can add even more newlines and parentheses so that it's easier to nest more JSX in each of the cases:
+
+
+حال فرض کنید می‌خواهید متن مورد تکمیل‌شده را در یک تگ HTML دیگری مانند `<del>` بپیچید تا روی آن خط بکشید. می‌توانید حتی خطوط جدید و پرانتز بیشتری اضافه کنید تا در هر یک از موارد، JSX بیشتری را راحت‌تر جاسازی کنید.
+
 
 <Sandpack>
 
@@ -256,11 +299,17 @@ export default function PackingList() {
 
 </Sandpack>
 
-This style works well for simple conditions, but use it in moderation. If your components get messy with too much nested conditional markup, consider extracting child components to clean things up. In React, markup is a part of your code, so you can use tools like variables and functions to tidy up complex expressions.
 
-### Logical AND operator (`&&`) {/*logical-and-operator-*/}
+این سبک برای شرایط ساده به خوبی کار می کند، اما از آن در حد اعتدال استفاده کنید. اگر کامپوننت‌های شما با نشانه‌گذاری‌های شرطی بیش از حد تودرتو، آشفته می‌شوند، برای تمیز کردن این موارد، کامپوننت فرزند را جدا کنید. در ری‌اکت، نشانه گذاری بخشی از کد شما است، بنابراین می توانید از ابزارهایی مانند متغیرها و توابع برای مرتب کردن عبارات پیچیده استفاده کنید.
+
+
+
+### عملگر منطقی AND (`&&`) {/*logical-and-operator-*/}
+
+
+
+یکی دیگر از میانبرهای رایجی که با آن مواجه خواهید شد، [عملگر منطقی AND (`&&`) جاوا اسکریپت است.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) در داخل کامپوننت های ری‌اکت، اغلب زمانی می‌آید که می خواهید مقداری JSX را وقتی شرطی درست است، رندر کنید، **یا هیچ چیزی را رندر نکنید.** با `&&`، فقط در صورتی می توانید علامت را به صورت شرطی ارائه دهید که  `true` ،`isPacked` باشد:
 
-Another common shortcut you'll encounter is the [JavaScript logical AND (`&&`) operator.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) Inside React components, it often comes up when you want to render some JSX when the condition is true, **or render nothing otherwise.** With `&&`, you could conditionally render the checkmark only if `isPacked` is `true`:
 
 ```js
 return (
@@ -270,9 +319,11 @@ return (
 );
 ```
 
-You can read this as *"if `isPacked`, then (`&&`) render the checkmark, otherwise, render nothing"*.
 
-Here it is in action:
+می توانید این را به صورت *"اگر `isPacked`، آنگاه (`&&`) علامت چک‌مارک را ارائه دهید، در غیر این صورت، هیچ چیزی را رندر نکنید"*، بخوانید.
+
+اینجا در عمل داریم:
+
 
 <Sandpack>
 
@@ -310,30 +361,36 @@ export default function PackingList() {
 
 </Sandpack>
 
-A [JavaScript && expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) returns the value of its right side (in our case, the checkmark) if the left side (our condition) is `true`. But if the condition is `false`, the whole expression becomes `false`. React considers `false` as a "hole" in the JSX tree, just like `null` or `undefined`, and doesn't render anything in its place.
+
+یک [عبارت && جاوااسکریپت](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) اگر سمت چپ (شرط ما) `true` است، مقدار سمت راست خود (در مورد ما، علامت چکمارک) را برمی گرداند. اما اگر شرط `false` باشد، کل عبارت `false` می شود. ری‌اکت `false` را به عنوان "سوراخ" در درخت JSX، درست مانند `null` یا `undefined` در نظر می‌گیرد و هیچ چیزی را در جای آن ارائه نمی‌کند.
 
 
 <Pitfall>
 
-**Don't put numbers on the left side of `&&`.**
 
-To test the condition, JavaScript converts the left side to a boolean automatically. However, if the left side is `0`, then the whole expression gets that value (`0`), and React will happily render `0` rather than nothing.
+**اعداد را در سمت چپ `&&` قرار ندهید.**
 
-For example, a common mistake is to write code like `messageCount && <p>New messages</p>`. It's easy to assume that it renders nothing when `messageCount` is `0`, but it really renders the `0` itself!
+برای آزمایش‌کردن شرط، جاوا اسکریپت سمت چپ را به صورت خودکار به یک boolean تبدیل می کند. با این حال، اگر سمت چپ `0` باشد، کل عبارت مقدار (`0`) را می‌گیرد، و ری‌اکت با خوشحالی `0` را به جای هیچ رندر می کند. 
 
-To fix it, make the left side a boolean: `messageCount > 0 && <p>New messages</p>`.
+به عنوان مثال، یک اشتباه رایج نوشتن کدی مانند ‍‍‍‍‍‍`messageCount && <p>New messages</p>` است. به راحتی می توان فرض کرد که وقتی `messageCount` برابر با `0` است، چیزی رندر نمی کند، اما درواقع خود `0` را رندر می کند!
+
+برای رفع آن، سمت چپ را به صورت boolean درآورید: `messageCount > 0 && <p>New messages</p>`.
 
 </Pitfall>
 
-### Conditionally assigning JSX to a variable {/*conditionally-assigning-jsx-to-a-variable*/}
 
-When the shortcuts get in the way of writing plain code, try using an `if` statement and a variable. You can reassign variables defined with [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), so start by providing the default content you want to display, the name:
+### انتساب (assign) شرطی JSX به یک متغیر {/*conditionally-assigning-jsx-to-a-variable*/}
+
+وقتی میانبرها مانع نوشتن کد ساده می شوند، سعی کنید از عبارت `if` و یک متغیر استفاده کنید. می توانید متغیرهای تعریف شده با [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) را مجدداً assign کنید، بنابراین با رندرکردن محتوای پیش فرضی که می خواهید نمایش دهید شروع کنید، نام:
+
 
 ```js
 let itemContent = name;
 ```
 
-Use an `if` statement to reassign a JSX expression to `itemContent` if `isPacked` is `true`:
+
+از عبارت `if` برای تخصیص (assign) مجدد عبارت JSX به `itemContent` استفاده کنید، اگر `true` ،`isPacked` باشد:
+
 
 ```js
 if (isPacked) {
@@ -341,7 +398,9 @@ if (isPacked) {
 }
 ```
 
-[Curly braces open the "window into JavaScript".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Embed the variable with curly braces in the returned JSX tree, nesting the previously calculated expression inside of JSX:
+
+[آکولادها "پنجره‌ای به جاوا اسکریپت"  باز می کنند.](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) متغیر را با آکولاد در درخت JSX بازگشتی قرار دهید،‌ قرار دادن عبارت محاسبه شده قبلی در JSX: 
+
 
 ```js
 <li className="item">
@@ -349,7 +408,9 @@ if (isPacked) {
 </li>
 ```
 
-This style is the most verbose, but it's also the most flexible. Here it is in action:
+
+این سبک طولانی‌ترین است، اما انعطاف پذیرترین هم می‌باشد. اینجا در عمل داریم:
+
 
 <Sandpack>
 
@@ -391,7 +452,9 @@ export default function PackingList() {
 
 </Sandpack>
 
-Like before, this works not only for text, but for arbitrary JSX too:
+
+مانند قبل، این نه تنها برای متن، بلکه برای JSX دلخواه نیز کار می کند:
+
 
 <Sandpack>
 
@@ -437,26 +500,31 @@ export default function PackingList() {
 
 </Sandpack>
 
-If you're not familiar with JavaScript, this variety of styles might seem overwhelming at first. However, learning them will help you read and write any JavaScript code -- and not just React components! Pick the one you prefer for a start, and then consult this reference again if you forget how the other ones work.
+
+اگر با جاوا اسکریپت آشنایی ندارید، این تنوع سبک در ابتدا ممکن است طاقت‌فرسا به نظر برسد. با این حال، یادگیری آنها به شما کمک می کند تا هر کد جاوا اسکریپت را بخوانید و بنویسید -- و نه فقط کامپوننت‌‌های ری‌اکت را! یکی را که برای شروع ترجیح می دهید انتخاب کنید و اگر فراموش کردید که بقیه چگونه کار می کنند، دوباره با این مرجع مشورت کنید.
 
 <Recap>
 
-* In React, you control branching logic with JavaScript.
-* You can return a JSX expression conditionally with an `if` statement.
-* You can conditionally save some JSX to a variable and then include it inside other JSX by using the curly braces.
-* In JSX, `{cond ? <A /> : <B />}` means *"if `cond`, render `<A />`, otherwise `<B />`"*.
-* In JSX, `{cond && <A />}` means *"if `cond`, render `<A />`, otherwise nothing"*.
-* The shortcuts are common, but you don't have to use them if you prefer plain `if`.
 
-</Recap>
+* در ری‌اکت، منطق شاخه‌بندی را با جاوا اسکریپت کنترل می‌کنید.
+* می توانید یک عبارت JSX را به صورت شرطی با عبارت `if` برگردانید.
+* می توانید به صورت شرطی JSX را در یک متغیر ذخیره کنید و سپس با استفاده از آکولاد آن را در داخل JSX دیگری قرار دهید.
+* در JSX، عبارت  `{cond ? <A /> : <B />}` به معنای *"اگر `cond` ، آنگاه `<A />` را رندر کنید، در غیر این صورت `<B />` را"* است.
+* در JSX، عبارت  `{cond && <A />}` به معنای *"اگر `cond` ، آنگاه `<A />` را رندر کنید، در غیر این صورت هیچی"* است.
+* میانبرها رایج هستند، اما اگر `if`  ساده را ترجیح می دهید، نیازی به استفاده از آنها ندارید.
 
 
+</Recap>
 
 <Challenges>
 
-#### Show an icon for incomplete items with `? :` {/*show-an-icon-for-incomplete-items-with--*/}
 
-Use the conditional operator (`cond ? a : b`) to render a ❌ if `isPacked` isn’t `true`.
+#### نمادی برای مواردی که کامل‌نشده با `? :` نشان بده {/*show-an-icon-for-incomplete-items-with--*/}
+
+
+
+اگر `true` ،`isPacked` نباشد،‌ از عملگر شرطی (`cond ? a : b`) برای رندر‌کردن ❌ استفاده کن.
+
 
 <Sandpack>
 
@@ -534,15 +602,18 @@ export default function PackingList() {
 
 </Solution>
 
-#### Show the item importance with `&&` {/*show-the-item-importance-with-*/}
+#### اهمیت مورد را با `&&` نشان بده {/*show-the-item-importance-with-*/}
+
+
 
-In this example, each `Item` receives a numerical `importance` prop. Use the `&&` operator to render "_(Importance: X)_" in italics, but only for items that have non-zero importance. Your item list should end up looking like this:
+در این مثال، هر `Item` یک `importance` عددی دریافت می‌کند. از عملگر `&&` برای نمایش "_(Importance: X)_" به صورت italics استفاده کنید، اما فقط برای مواردی که اهمیت غیر صفر دارند. لیست اقلام شما باید به این شکل باشد:
 
 * Space suit _(Importance: 9)_
 * Helmet with a golden leaf
 * Photo of Tam _(Importance: 6)_
 
-Don't forget to add a space between the two labels!
+فراموش نکنید که بین دو label فاصله (space) اضافه کنید!
+
 
 <Sandpack>
 
@@ -582,7 +653,10 @@ export default function PackingList() {
 
 <Solution>
 
-This should do the trick:
+
+
+این باید کارساز باشد:
+
 
 <Sandpack>
 
@@ -624,15 +698,22 @@ export default function PackingList() {
 
 </Sandpack>
 
-Note that you must write `importance > 0 && ...` rather than `importance && ...` so that if the `importance` is `0`, `0` isn't rendered as the result!
 
-In this solution, two separate conditions are used to insert a space between the name and the importance label. Alternatively, you could use a Fragment with a leading space: `importance > 0 && <> <i>...</i></>` or add a space immediately inside the `<i>`:  `importance > 0 && <i> ...</i>`.
+
+توجه داشته باشید که باید به جای `importance && ...` بنویسید `importance > 0 && ...` تا اگر `importance` برابر با `0` باشد، `0` به عنوان نتیجه رندر نشود!
+
+در این راه حل، از دو شرط مجزا برای درج فاصله بین نام و label اهمیت استفاده می شود. همچنین، می‌توانید از یک fragment با یک فاصله در ابتدا استفاده کنید: `importance > 0 && <> <i>...</i></>` یا بلافاصله یک فاصله در داخل `<i>` اضافه کنید: `importance > 0 && <i> ...</i>`.
+
+
 
 </Solution>
 
-#### Refactor a series of `? :` to `if` and variables {/*refactor-a-series-of---to-if-and-variables*/}
+#### ری‌فکتور یک سری از `? :` به `if` و متغیر‌ها {/*refactor-a-series-of---to-if-and-variables*/}
+
+
+
+این کامپوننت `Drink` از یک سری شرط‌های `? :` برای نشان دادن اطلاعات مختلف بسته به اینکه prop `name` برابر با `"tea"` باشد یا  `"coffee"` ،‌ استفاده می‌کند. مشکل این است که اطلاعات مربوط به هر نوشیدنی در شرط‌های مختلف پخش می شود. این کد را برای استفاده از یک عبارت `if` به جای سه شرط‌ `? :` ری‌فکتور کنید 
 
-This `Drink` component uses a series of `? :` conditions to show different information depending on whether the `name` prop is `"tea"` or `"coffee"`. The problem is that the information about each drink is spread across multiple conditions. Refactor this code to use a single `if` statement instead of three `? :` conditions.
 
 <Sandpack>
 
@@ -658,18 +739,23 @@ export default function DrinkList() {
     <div>
       <Drink name="tea" />
       <Drink name="coffee" />
-    </div>
+  
   );
 }
 ```
 
 </Sandpack>
 
-Once you've refactored the code to use `if`, do you have further ideas on how to simplify it?
+
+هنگامی که کد را برای استفاده از `if` ری‌فکتور کردید، آیا ایده‌های بیشتری در مورد چگونگی ساده سازی آن دارید؟
+
 
 <Solution>
 
-There are multiple ways you could go about this, but here is one starting point:
+
+
+راه‌های مختلفی وجود دارد که می‌توانید برای این کار بروید، اما در اینجا یک نقطه شروع وجود دارد:
+
 
 <Sandpack>
 
@@ -705,16 +791,19 @@ export default function DrinkList() {
     <div>
       <Drink name="tea" />
       <Drink name="coffee" />
-    </div>
+  
   );
 }
 ```
 
 </Sandpack>
 
-Here the information about each drink is grouped together instead of being spread across multiple conditions. This makes it easier to add more drinks in the future.
 
-Another solution would be to remove the condition altogether by moving the information into objects:
+
+در اینجا اطلاعات مربوط به هر نوشیدنی به جای پخش شدن در شرط‌های مختلف، با هم گروه بندی می شوند. این کار اضافه کردن نوشیدنی های بیشتر را در آینده آسان می کند.
+
+راه حل دیگر حذف کامل شرط‌ها با انتقال اطلاعات به  objectها است:
+
 
 <Sandpack>
 
@@ -754,7 +843,7 @@ export default function DrinkList() {
     <div>
       <Drink name="tea" />
       <Drink name="coffee" />
-    </div>
+  
   );
 }
 ```