diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 9d689b52e..cec26a137 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -4,14 +4,13 @@ title: رندر‌کردن شرطی
 
 <Intro>
 
-<div dir="rtl">
+
 
 کامپوننت‌های شما معمولا بسته به شرایط مختلف نیاز به نمایش چیزهای مختلفی دارند. در ری‌اکت، می‌توانید ‌JSX را با سینتکس جاوااسکریپت با استفاده از دستوراتی مانند `if`،‌ `&&`،‌ و `? :` به صورت شرطی رندر کنید.
 
-</div>
 </Intro>
 
-<div dir="rtl">
+
 <YouWillLearn>
 
 * نحوه برگرداندن JSX های مختلف بسته به یک شرط
@@ -19,17 +18,14 @@ title: رندر‌کردن شرطی
 * میانبرهای سینتکسی شرطی رایج که در کد‌های ری‌اکت با آنها مواجه خواهید شد
 
 </YouWillLearn>
-</div>
-<div dir="rtl">
+
 
 ## برگرداندن شرطی JSX {/*conditionally-returning-jsx*/}
 
-</div>
-<div dir="rtl">
+
 
 فرض کنید یک کامپوننت `PackingList` دارید که چندین `Item` را رندر می‌کند، که می‌توان آن‌ها را به‌عنوان بسته‌بندی‌شده یا غیر بسته‌بندی‌شده علامت‌گذاری کرد:
 
-</div>
 <Sandpack>
 
 ```js
@@ -61,13 +57,12 @@ export default function PackingList() {
 ```
 
 </Sandpack>
-<div dir="rtl">
+
 
 توجه داشته باشید که برای برخی از کامپوننت‌های   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> بنویسید:
 
-</div>
 
 ```js
 if (isPacked) {
@@ -75,11 +70,10 @@ if (isPacked) {
 }
 return <li className="item">{name}</li>;
 ```
-<div dir="rtl">
+
 
 اگر prop `isPacked`،‌ `true` باشد، این کد **یک درخت JSX متفاوت را برمی‌گرداند.** با این تغییر، برخی از آیتم ها در انتها علامت چک‌مارک می‌گیرند:
 
-</div>
 <Sandpack>
 
 ```js
@@ -114,23 +108,20 @@ export default function PackingList() {
 ```
 
 </Sandpack>
-<div dir="rtl">
+
 
 سعی کنید آنچه را که در هر کدام از حالت‌ها بازگردانده می شود ویرایش کنید و ببینید نتیجه چگونه تغییر می کند!
 
 به نحوه ایجاد منطق شاخه‌ای با دستورات `if` و `return` جاوا اسکریپت توجه کنید. در ری‌اکت، control flow (مانند شرایط) توسط جاوا اسکریپت مدیریت می شود.
 
-</div>
-<div dir="rtl">
+
 
 ### برنگرداندن چیزی به صورت شرطی با `null` {/*conditionally-returning-nothing-with-null*/}
 
-</div>
-<div dir="rtl">
+
 
 در برخی شرایط، اصلاً نمی خواهید چیزی را رندر کنید. مثلاً وقتی اصلاً نمی‌خواهید موارد بسته‌بندی شده را نشان دهید. یک کامپوننت باید چیزی را برگرداند. در این مورد، می توانید `null` را برگردانید:
 
-</div>
 
 ```js
 if (isPacked) {
@@ -138,11 +129,10 @@ if (isPacked) {
 }
 return <li className="item">{name}</li>;
 ```
-<div dir="rtl">
+
 
 اگر ‌true ،`isPacked`  باشد، کامپوننت چیزی را بر نمی‌گرداند، `null`. در غیر این صورت، JSX را برای رندر برمی گرداند.
 
-</div>
 
 <Sandpack>
 
@@ -178,36 +168,32 @@ export default function PackingList() {
 ```
 
 </Sandpack>
-<div dir="rtl">
+
 
 در عمل، برگرداندن `null` از یک کامپوننت رایج نیست، زیرا ممکن است توسعه‌دهنده‌ای را که تلاش می‌کند آن را رندر کند، سورپرایز کند. بیشتر اوقات، شما به صورت شرطی کامپوننت را در JSX کامپوننت پدر قرار می دهید یا حذف می کنید. در اینجا نحوه انجام این کار آمده است!
 
-</div>
-<div dir="rtl">
+
 
 ## شامل‌شدن ‌JSX به صورت شرطی {/*conditionally-including-jsx*/}
 
-</div>
 در مثال قبلی، شما کنترل کردید که کدام درخت JSX (در صورت وجود!) توسط کامپوننت بازگردانده شود. ممکن است قبلاً متوجه مقداری تکرار در خروجی رندر شده باشید:
 
 ```js
 <li className="item">{name} ✔</li>
 ```
 
-<div dir="rtl">
+
 
 بسیار مشابه است با
 
-</div>
 
 ```js
 <li className="item">{name}</li>
 ```
-<div dir="rtl">
+
 
 هر دو شاخه شرطی `<li className="item">...</li>` را برمی‌گردانند:
 
-</div>
 
 ```js
 if (isPacked) {
@@ -216,23 +202,20 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
-<div dir="rtl">
+
 
 اگرچه این تکرار مضر نیست، اما می‌تواند نگهداری کد شما را سخت‌تر کند. اگر بخواهید `className` را تغییر دهید چه؟ شما باید این کار را در دو جا از کد خود انجام دهید! در چنین شرایطی، می‌توانید به صورت شرطی، کمی JSX اضافه کنید تا کدتان بیشتر [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) شود. 
 
-</div>
-<div dir="rtl">
+
 
 ### عملگر شرطی (سه تایی) (`? :`) {/*conditional-ternary-operator--*/}
 
-</div>
-<div dir="rtl">
+
 
 جاوا اسکریپت یک سینتکس فشرده برای نوشتن یک عبارت شرطی دارد -- [عملگر شرطی](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) یا "عملگر سه تایی".
 
 به جای این:
 
-</div>
 
 ```js
 if (isPacked) {
@@ -240,11 +223,10 @@ if (isPacked) {
 }
 return <li className="item">{name}</li>;
 ```
-<div dir="rtl">
+
 
 می توانید این را بنویسید:
 
-</div>
 
 ```js
 return (
@@ -254,29 +236,26 @@ return (
 );
 ```
 
-<div dir="rtl">
+
 
 شما می توانید آن را به صورت *"اگر `isPacked` درست است، سپس  (`?`) `name + ' ✔'` را رندر کنید، در غیر این صورت (`:`) `name` را اجرا کنید "*  بخوانید.
 
-</div>
 
 <DeepDive>
 
 #### آیا این دو مثال کاملاً معادل هستند؟ {/*are-these-two-examples-fully-equivalent*/}
 
-<div dir="rtl">
+
 
 اگر از یک پس‌زمینه برنامه‌نویسی شی‌گرا می‌آیید، ممکن است فرض کنید که دو مثال بالا به طور ظاهری متفاوت هستند، زیرا یکی از آنها ممکن است دو "نمونه" متفاوت از `<li>` ایجاد کند. اما المنت‌های JSX "نمونه" نیستند زیرا هیچ حالت داخلی ندارند و نودهای  واقعی DOM نیستند. آنها توصیف های سبک وزن هستند، مانند blueprintها. بنابراین، این دو مثال، در واقع کاملاً معادل *هستند*. [نگهداری و بازنشانی وضعیت](/learn/preserving-and-resetting-state) به تفصیل درباره اینکه چگونه این، کار می‌کند توضیح می‌دهد.
 
-</div>
 
 </DeepDive>
 
-<div dir="rtl">
+
 
 حال فرض کنید می‌خواهید متن مورد تکمیل‌شده را در یک تگ HTML دیگری مانند `<del>` بپیچید تا روی آن خط بکشید. می‌توانید حتی خطوط جدید و پرانتز بیشتری اضافه کنید تا در هر یک از موارد، JSX بیشتری را راحت‌تر جاسازی کنید.
 
-</div>
 
 <Sandpack>
 
@@ -319,21 +298,18 @@ export default function PackingList() {
 ```
 
 </Sandpack>
-<div dir="rtl">
+
 
 این سبک برای شرایط ساده به خوبی کار می کند، اما از آن در حد اعتدال استفاده کنید. اگر کامپوننت‌های شما با نشانه‌گذاری‌های شرطی بیش از حد تودرتو، آشفته می‌شوند، برای تمیز کردن این موارد، کامپوننت فرزند را جدا کنید. در ری‌اکت، نشانه گذاری بخشی از کد شما است، بنابراین می توانید از ابزارهایی مانند متغیرها و توابع برای مرتب کردن عبارات پیچیده استفاده کنید.
 
-</div>
-<div dir="rtl">
+
 
 ### عملگر منطقی AND (`&&`) {/*logical-and-operator-*/}
 
-</div>
-<div dir="rtl">
+
 
 یکی دیگر از میانبرهای رایجی که با آن مواجه خواهید شد، [عملگر منطقی 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` باشد:
 
-</div>
 
 ```js
 return (
@@ -342,13 +318,12 @@ return (
   </li>
 );
 ```
-<div dir="rtl">
+
 
 می توانید این را به صورت *"اگر `isPacked`، آنگاه (`&&`) علامت چک‌مارک را ارائه دهید، در غیر این صورت، هیچ چیزی را رندر نکنید"*، بخوانید.
 
 اینجا در عمل داریم:
 
-</div>
 
 <Sandpack>
 
@@ -385,14 +360,13 @@ export default function PackingList() {
 ```
 
 </Sandpack>
-<div dir="rtl">
+
 
 یک [عبارت && جاوااسکریپت](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) اگر سمت چپ (شرط ما) `true` است، مقدار سمت راست خود (در مورد ما، علامت چکمارک) را برمی گرداند. اما اگر شرط `false` باشد، کل عبارت `false` می شود. ری‌اکت `false` را به عنوان "سوراخ" در درخت JSX، درست مانند `null` یا `undefined` در نظر می‌گیرد و هیچ چیزی را در جای آن ارائه نمی‌کند.
 
-</div>
 
 <Pitfall>
-<div dir="rtl">
+
 
 **اعداد را در سمت چپ `&&` قرار ندهید.**
 
@@ -402,46 +376,41 @@ export default function PackingList() {
 
 برای رفع آن، سمت چپ را به صورت boolean درآورید: `messageCount > 0 && <p>New messages</p>`.
 
-</div>
 </Pitfall>
-<div dir="rtl">
+
 
 ### انتساب (assign) شرطی JSX به یک متغیر {/*conditionally-assigning-jsx-to-a-variable*/}
 
 وقتی میانبرها مانع نوشتن کد ساده می شوند، سعی کنید از عبارت `if` و یک متغیر استفاده کنید. می توانید متغیرهای تعریف شده با [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) را مجدداً assign کنید، بنابراین با رندرکردن محتوای پیش فرضی که می خواهید نمایش دهید شروع کنید، نام:
 
-</div>
 
 ```js
 let itemContent = name;
 ```
-<div dir="rtl">
+
 
 از عبارت `if` برای تخصیص (assign) مجدد عبارت JSX به `itemContent` استفاده کنید، اگر `true` ،`isPacked` باشد:
 
-</div>
 
 ```js
 if (isPacked) {
   itemContent = name + " ✔";
 }
 ```
-<div dir="rtl">
+
 
 [آکولادها "پنجره‌ای به جاوا اسکریپت"  باز می کنند.](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) متغیر را با آکولاد در درخت JSX بازگشتی قرار دهید،‌ قرار دادن عبارت محاسبه شده قبلی در JSX: 
 
-</div>
 
 ```js
 <li className="item">
   {itemContent}
 </li>
 ```
-<div dir="rtl">
+
 
 این سبک طولانی‌ترین است، اما انعطاف پذیرترین هم می‌باشد. اینجا در عمل داریم:
 
-</div>
 
 <Sandpack>
 
@@ -482,11 +451,10 @@ export default function PackingList() {
 ```
 
 </Sandpack>
-<div dir="rtl">
+
 
 مانند قبل، این نه تنها برای متن، بلکه برای JSX دلخواه نیز کار می کند:
 
-</div>
 
 <Sandpack>
 
@@ -531,13 +499,12 @@ export default function PackingList() {
 ```
 
 </Sandpack>
-<div dir="rtl">
+
 
 اگر با جاوا اسکریپت آشنایی ندارید، این تنوع سبک در ابتدا ممکن است طاقت‌فرسا به نظر برسد. با این حال، یادگیری آنها به شما کمک می کند تا هر کد جاوا اسکریپت را بخوانید و بنویسید -- و نه فقط کامپوننت‌‌های ری‌اکت را! یکی را که برای شروع ترجیح می دهید انتخاب کنید و اگر فراموش کردید که بقیه چگونه کار می کنند، دوباره با این مرجع مشورت کنید.
 
-</div>
 <Recap>
-<div dir="rtl">
+
 
 * در ری‌اکت، منطق شاخه‌بندی را با جاوا اسکریپت کنترل می‌کنید.
 * می توانید یک عبارت JSX را به صورت شرطی با عبارت `if` برگردانید.
@@ -546,7 +513,6 @@ export default function PackingList() {
 * در JSX، عبارت  `{cond && <A />}` به معنای *"اگر `cond` ، آنگاه `<A />` را رندر کنید، در غیر این صورت هیچی"* است.
 * میانبرها رایج هستند، اما اگر `if`  ساده را ترجیح می دهید، نیازی به استفاده از آنها ندارید.
 
-</div>
 
 </Recap>
 
@@ -555,11 +521,10 @@ export default function PackingList() {
 
 #### نمادی برای مواردی که کامل‌نشده با `? :` نشان بده {/*show-an-icon-for-incomplete-items-with--*/}
 
-<div dir="rtl">
+
 
 اگر `true` ،`isPacked` نباشد،‌ از عملگر شرطی (`cond ? a : b`) برای رندر‌کردن ❌ استفاده کن.
 
-</div>
 
 <Sandpack>
 
@@ -639,7 +604,7 @@ export default function PackingList() {
 
 #### اهمیت مورد را با `&&` نشان بده {/*show-the-item-importance-with-*/}
 
-<div dir="rtl">
+
 
 در این مثال، هر `Item` یک `importance` عددی دریافت می‌کند. از عملگر `&&` برای نمایش "_(Importance: X)_" به صورت italics استفاده کنید، اما فقط برای مواردی که اهمیت غیر صفر دارند. لیست اقلام شما باید به این شکل باشد:
 
@@ -649,7 +614,6 @@ export default function PackingList() {
 
 فراموش نکنید که بین دو label فاصله (space) اضافه کنید!
 
-</div>
 
 <Sandpack>
 
@@ -689,11 +653,10 @@ export default function PackingList() {
 
 <Solution>
 
-<div dir="rtl">
+
 
 این باید کارساز باشد:
 
-</div>
 
 <Sandpack>
 
@@ -735,24 +698,22 @@ export default function PackingList() {
 
 </Sandpack>
 
-<div dir="rtl">
+
 
 توجه داشته باشید که باید به جای `importance && ...` بنویسید `importance > 0 && ...` تا اگر `importance` برابر با `0` باشد، `0` به عنوان نتیجه رندر نشود!
 
 در این راه حل، از دو شرط مجزا برای درج فاصله بین نام و label اهمیت استفاده می شود. همچنین، می‌توانید از یک fragment با یک فاصله در ابتدا استفاده کنید: `importance > 0 && <> <i>...</i></>` یا بلافاصله یک فاصله در داخل `<i>` اضافه کنید: `importance > 0 && <i> ...</i>`.
 
-</div>
 
 
 </Solution>
 
 #### ری‌فکتور یک سری از `? :` به `if` و متغیر‌ها {/*refactor-a-series-of---to-if-and-variables*/}
 
-<div dir="rtl">
+
 
 این کامپوننت `Drink` از یک سری شرط‌های `? :` برای نشان دادن اطلاعات مختلف بسته به اینکه prop `name` برابر با `"tea"` باشد یا  `"coffee"` ،‌ استفاده می‌کند. مشکل این است که اطلاعات مربوط به هر نوشیدنی در شرط‌های مختلف پخش می شود. این کد را برای استفاده از یک عبارت `if` به جای سه شرط‌ `? :` ری‌فکتور کنید 
 
-</div>
 
 <Sandpack>
 
@@ -778,25 +739,23 @@ export default function DrinkList() {
     <div>
       <Drink name="tea" />
       <Drink name="coffee" />
-    </div>
+  
   );
 }
 ```
 
 </Sandpack>
-<div dir="rtl">
+
 
 هنگامی که کد را برای استفاده از `if` ری‌فکتور کردید، آیا ایده‌های بیشتری در مورد چگونگی ساده سازی آن دارید؟
 
-</div>
 
 <Solution>
 
-<div dir="rtl">
+
 
 راه‌های مختلفی وجود دارد که می‌توانید برای این کار بروید، اما در اینجا یک نقطه شروع وجود دارد:
 
-</div>
 
 <Sandpack>
 
@@ -832,20 +791,19 @@ export default function DrinkList() {
     <div>
       <Drink name="tea" />
       <Drink name="coffee" />
-    </div>
+  
   );
 }
 ```
 
 </Sandpack>
 
-<div dir="rtl">
+
 
 در اینجا اطلاعات مربوط به هر نوشیدنی به جای پخش شدن در شرط‌های مختلف، با هم گروه بندی می شوند. این کار اضافه کردن نوشیدنی های بیشتر را در آینده آسان می کند.
 
 راه حل دیگر حذف کامل شرط‌ها با انتقال اطلاعات به  objectها است:
 
-</div>
 
 <Sandpack>
 
@@ -885,7 +843,7 @@ export default function DrinkList() {
     <div>
       <Drink name="tea" />
       <Drink name="coffee" />
-    </div>
+  
   );
 }
 ```