diff --git a/src/content/learn/passing-props-to-a-component.md b/src/content/learn/passing-props-to-a-component.md
index 93e0fb1c7..f23ab0b9f 100644
--- a/src/content/learn/passing-props-to-a-component.md
+++ b/src/content/learn/passing-props-to-a-component.md
@@ -4,7 +4,7 @@ title:  تمرير الخصائص إلى مكوّن
 
 <Intro>
 
-تستخدم مكوّنات React "الخصائص" (props) للتواصل مع بعضها البعض. يمكن لكل مكوّن أب تمرير بعض المعلومات إلى مكوّناته الفرعية عن طريق إعطائها الخصائص. قد تذكرك الخصائص بسمات HTML ، ولكن يمكنك تمرير أي قيمة JavaScript من خلالها ، بما في ذلك الكائنات والمصفوفات والدوال.
+تستخدم مكوّنات React "الخصائص" (props) للتواصل مع بعضها البعض. يمكن لكل مكوّن أب تمرير بعض المعلومات إلى مكوّناته الفرعية عن طريق إعطائها الخصائص. قد تذكرك الخصائص بسمات HTML، ولكن يمكنك تمرير أي قيمة JavaScript من خلالها، بما في ذلك الكائنات والمصفوفات والدوال.
 
 </Intro>
 
@@ -20,7 +20,7 @@ title:  تمرير الخصائص إلى مكوّن
 
 ## الخصائص المألوفة {/*familiar-props*/}
 
-الخصائص هي المعلومات التي تمررها إلى وسم JSX . على سبيل المثال، `className`, `src`, `alt`, `width`, و `height` هي بعض الخصائص التي يمكنك تمريرها إلى `<img>`:
+الخصائص هي المعلومات التي تمررها إلى وسم JSX . على سبيل المثال، `className`، `src`، `alt`، `width`، و `height` هي بعض الخصائص التي يمكنك تمريرها إلى `<img>`:
 
 <Sandpack>
 
@@ -51,11 +51,11 @@ body { min-height: 120px; }
 
 </Sandpack>
 
-الخصائص التي يمكن تمريرها إلى وسم `<img>` هي خصائص محدده مسبقًا (ReactDOM يتوافق مع  [معيار الHTML](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element)). ولكن يمكنك تمرير أي خصائص إلى المكوّنات *الخاصة بك*, مثل `<Avatar>`, لتخصيصها. هنا كيفية ذلك!
+الخصائص التي يمكن تمريرها إلى وسم `<img>` هي خصائص محدده مسبقًا (ReactDOM يتوافق مع  [معيار الHTML](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element)). ولكن يمكنك تمرير أي خصائص إلى المكوّنات *الخاصة بك*، مثل `<Avatar>`، لتخصيصها. هنا كيفية ذلك!
 
 ## تمرير الخصائص إلى مكوّن {/*passing-props-to-a-component*/}
 
-في هذا الكود, مكوّن ال `Profile` لا يمرر أي خصائص إلى مكوّنه الطفل، `Avatar`:
+في هذا الكود، مكوّن ال `Profile` لا يمرر أي خصائص إلى مكوّنه الطفل، `Avatar`:
 
 ```js
 export default function Profile() {
@@ -69,13 +69,13 @@ export default function Profile() {
 
 ### الخطوة الأولى: تمرير الخصائص إلى مكوّن طفل {/*step-1-pass-props-to-the-child-component*/}
 
-أولاً، يجب تمرير بعض الخصائص إلى  `Avatar`. على سبيل المثال، دعونا نمرر خاصيتين: `person` (كائن), و `size` (رقم): 
+أولاً، يجب تمرير بعض الخصائص إلى  `Avatar`. على سبيل المثال، دعونا نمرر خاصيتين: `person` (كائن)، و `size` (رقم): 
 
 ```js
 export default function Profile() {
   return (
     <Avatar
-      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
+      person={{ name: 'Lin Lanying'، imageId: '1bX5QH6' }}
       size={100}
     />
   );
@@ -84,7 +84,7 @@ export default function Profile() {
 
 <Note>
 
-إذا كنت تشعر بالحيرة بسبب تكرار الأقواس المنحنية بعد `person=`, فتذكر [أنها مجرد كائن](/learn/javascript-in-jsx-with-curly-braces#using-double-curlies-css-and-other-objects-in-jsx) داخل الأقواس المنحنية (curlies) في JSX
+إذا كنت تشعر بالحيرة بسبب تكرار الأقواس المنحنية بعد `person=`، فتذكر [أنها مجرد كائن](/learn/javascript-in-jsx-with-curly-braces#using-double-curlies-css-and-other-objects-in-jsx) داخل الأقواس المنحنية (curlies) في JSX
 
 </Note>
 
@@ -92,7 +92,7 @@ export default function Profile() {
 
 ### الخطوة الثانية: اقرأ الخصائص داخل المكّون الطفل {/*step-2-read-props-inside-the-child-component*/}
 
-يمكنك قراءة هذه الخصائص عن طريق كتابة أسمائها `person, size` مفصولة بفواصل داخل `({` و `})` مباشرة بعد `function Avatar`. هذا يتيح لك استخدامها داخل كود `Avatar`, كما تفعل مع المتغيرات.
+يمكنك قراءة هذه الخصائص عن طريق كتابة أسمائها `person, size` مفصولة بفواصل داخل `({` و `})` مباشرة بعد `function Avatar`. هذا يتيح لك استخدامها داخل كود `Avatar`، كما تفعل مع المتغيرات.
 
 
 ```js
@@ -101,7 +101,7 @@ function Avatar({ person, size }) {
 }
 ```
 
-أضف بعض المنطق إلى `Avatar` باستخدام الخصائص `person` و `size` للتصيير, وبذلك تكون انتهيت.
+أضف بعض المنطق إلى `Avatar` باستخدام الخصائص `person` و `size` للتصيير، وبذلك تكون انتهيت.
 
 الآن يمكنك تهيئة `Avatar` للتصيير بطرق مختلفة مع خصائص مختلفة. جرب تعديل القيم!
 
@@ -169,7 +169,7 @@ body { min-height: 120px; }
 
 </Sandpack>
 
-تتيح لك المكوّنات التفكير في المكوّنات الآباء والمكوّنات الأبناء بشكل مستقل. على سبيل المثال, يمكنك تغيير مكوّنات ال`person` أو ال`size` في داخل `Profile` دون الحاجة للتفكير في كيفية استخدامهما في المكوّن المسمى `Avatar`. بالمثل، يمكنك تغيير كيفية استخدام المكوّن `Avatar` لهذه الخصائص دون النظر إلى المكوّن `Profile`.
+تتيح لك المكوّنات التفكير في المكوّنات الآباء والمكوّنات الأبناء بشكل مستقل. على سبيل المثال، يمكنك تغيير مكوّنات ال`person` أو ال`size` في داخل `Profile` دون الحاجة للتفكير في كيفية استخدامهما في المكوّن المسمى `Avatar`. بالمثل، يمكنك تغيير كيفية استخدام المكوّن `Avatar` لهذه الخصائص دون النظر إلى المكوّن `Profile`.
 
 يمكنك التفكير في الخصائص على أنها "أدوات تعديل" يمكنك تعديلها. إنها تؤدي نفس الدور الذي تؤديه الوسائط للدوال - في الواقع، الخصائص هي الوسيطة الوحيدة لمكوّنك! تقبل دوال المكوّنات في React وسيطة واحدة فقط، كائن خصائص
 
@@ -181,7 +181,7 @@ function Avatar(props) {
 }
 ```
 
-عادةً ما لا تحتاج إلى كامل كائن ال`props` نفسه, لذلك يتم تحليله إلى خصائص فردية.
+عادةً ما لا تحتاج إلى كامل كائن ال`props` نفسه، لذلك يتم تحليله إلى خصائص فردية.
 
 <Pitfall>
 
@@ -215,9 +215,9 @@ function Avatar({ person, size = 100 }) {
 }
 ```
 
-الآن، إذا تم عرض `<Avatar person={...} />` بدون خاصية `size`,سيتم تعيين ال`size` على `100`.
+الآن، إذا تم عرض `<Avatar person={...} />` بدون خاصية `size`،سيتم تعيين ال`size` على `100`.
 
-تُستخدم القيمة الافتراضية فقط إذا كانت خاصية ال`size` مفقودة أو إذا قمت بتمرير `size={undefined}`. ولكن إذا قمت بتمرير `size={null}` أو `size={0}`, **فلن** يتم استخدام القيمة الافتراضية.
+تُستخدم القيمة الافتراضية فقط إذا كانت خاصية ال`size` مفقودة أو إذا قمت بتمرير `size={undefined}`. ولكن إذا قمت بتمرير `size={null}` أو `size={0}`، **فلن** يتم استخدام القيمة الافتراضية.
 
 ## إعادة توجيه الخصائص باستخدام صيغة الانتشار (spread operator) في JSX {/*forwarding-props-with-the-jsx-spread-syntax*/}
 
@@ -238,7 +238,7 @@ function Profile({ person, size, isSepia, thickBorder }) {
 }
 ```
 
-لا يوجد أي شيء خاطئ في تكرار الكود - بل يمكن أن يزيد الوضوح. ولكن في بعض الأحيان قد يُفَضّل الاختصار. تقوم بعض المكوّنات بتوجيه جميع خصائصها إلى أطفالها, مثل الطريقة التي يفعل بها `Profile` مع `Avatar`.  نظرًا لعدم استخدامها لأي من خصائصها مباشرة، فقد يكون من المنطقي استخدام صيغة الانتشار "spread" الأكثر اختصارًا:
+لا يوجد أي شيء خاطئ في تكرار الكود - بل يمكن أن يزيد الوضوح. ولكن في بعض الأحيان قد يُفَضّل الاختصار. تقوم بعض المكوّنات بتوجيه جميع خصائصها إلى أطفالها، مثل الطريقة التي يفعل بها `Profile` مع `Avatar`.  نظرًا لعدم استخدامها لأي من خصائصها مباشرة، فقد يكون من المنطقي استخدام صيغة الانتشار "spread" الأكثر اختصارًا:
 
 ```js
 function Profile(props) {
@@ -252,7 +252,7 @@ function Profile(props) {
 
 يقوم هذا بتوجيه جميع خصائص `Profile` إلى `Avatar` دون تسمية كل منها بشكل فردي.
 
-**استخدم صيغة انتشار بحذر.** إذا كنت تستخدمها في كل مكوّن آخر ، فهناك شيء خاطئ. غالبًا ما يشير ذلك إلى أنه يجب تقسيم المكوّنات الخاصة بك وتمرير الأطفال كـ JSX. المزيد حول ذلك في القسم التالي!
+**استخدم صيغة انتشار بحذر.** إذا كنت تستخدمها في كل مكوّن آخر، فهناك شيء خاطئ. غالبًا ما يشير ذلك إلى أنه يجب تقسيم المكوّنات الخاصة بك وتمرير الأطفال كـ JSX. المزيد حول ذلك في القسم التالي!
 
 ## تمرير JSX كأطفال {/*passing-jsx-as-children*/}
 
@@ -272,7 +272,7 @@ function Profile(props) {
 </Card>
 ```
 
-عند تضمين محتوى داخل وسم JSX, سيتلقى المكوّن الأب هذا المحتوى في خاصية تسمى `children`. على سبيل المثال, سيتلقى المكوّن `Card` القادم خاصية `children` التي تم تعيينها على `<Avatar />` و يقوم بعرضها في قسم مجمع
+عند تضمين محتوى داخل وسم JSX، سيتلقى المكوّن الأب هذا المحتوى في خاصية تسمى `children`. على سبيل المثال، سيتلقى المكوّن `Card` القادم خاصية `children` التي تم تعيينها على `<Avatar />` و يقوم بعرضها في قسم مجمع
 
 <Sandpack>
 
@@ -350,13 +350,13 @@ export function getImageUrl(person, size = 's') {
 
 جرب استبدال `<Avatar>` داخل `<Card>` بنص ما لمعرفة كيف يمكن للمكوّن `Card` لف أي محتوى متداخل. لا يحتاج  المكوّن إلى "معرفة" ما يتم تقديمه داخله. سترى هذه النمط المرن في العديد من الأماكن.
 
-يمكنك التفكير في المكوّن الذي يحتوي على خاصية `children` على أنه لديه "ثقب" يمكن "ملؤه" من قِبَل مكوّناته الأبويه بأي JSX. سوف تستخدم في كثير من الأحيان خاصية `children` للتغليف البصري: اللوحات ، الشبكات ، إلخ.
+يمكنك التفكير في المكوّن الذي يحتوي على خاصية `children` على أنه لديه "ثقب" يمكن "ملؤه" من قِبَل مكوّناته الأبويه بأي JSX. سوف تستخدم في كثير من الأحيان خاصية `children` للتغليف البصري: اللوحات، الشبكات، إلخ.
 
 <Illustration src="/images/docs/illustrations/i_children-prop.png" alt='A puzzle-like Card tile with a slot for "children" pieces like text and Avatar' />
 
 ## كيفية تغيير الخصائص مع مرور الوقت {/*how-props-change-over-time*/}
 
-يتلقى المكوّن `Clock` القادم خاصيتين من مكوّنه الأب: `color` و `time`. (تم حذف كود المكوّن الأب لأنه يستخدم الحالة [state](/learn/state-a-components-memory), التي لا نريد أن نتعمق فيها الآن.)
+يتلقى المكوّن `Clock` القادم خاصيتين من مكوّنه الأب: `color` و `time`. (تم حذف كود المكوّن الأب لأنه يستخدم الحالة [state](/learn/state-a-components-memory)، التي لا نريد أن نتعمق فيها الآن.)
 
 جرب تغيير اللون في مربع الاختيار أدناه:
 
@@ -408,18 +408,18 @@ export default function App() {
 
 </Sandpack>
 
-يوضح هذا المثال أنه **يمكن للمكوّن أن يتلقى خصائص مختلفة مع مرور الوقت.** الخصائص ليست دائمًا ثابتة! هنا، تتغير الخاصية `time` كل ثانية, وتتغير الخاصية `color` عندما تختار لونًا آخر. تعكس الخصائص بيانات المكوّن في أي نقطة من الزمن، عوضاً عن البدايه فقط.
+يوضح هذا المثال أنه **يمكن للمكوّن أن يتلقى خصائص مختلفة مع مرور الوقت.** الخصائص ليست دائمًا ثابتة! هنا، تتغير الخاصية `time` كل ثانية، وتتغير الخاصية `color` عندما تختار لونًا آخر. تعكس الخصائص بيانات المكوّن في أي نقطة من الزمن، عوضاً عن البدايه فقط.
 
-ومع ذلك ، تكون الخصائص [immutable](https://en.wikipedia.org/wiki/Immutable_object)—وهو مصطلح من علم الحوسبة يعني "لا يمكن تغييره". عندما يحتاج المكوّن إلى تغيير خصائصه (على سبيل المثال، ردًا على تفاعل من المستخدم أو بيانات جديدة), سيضطر إلى "طلب" من مكوّنه الأب تمريره _خصائص مختلفة_—كائن جديد! سيتم رفض الخصائص القديمة ثم سيستعيد محرك JavaScript في نهاية المطاف الذاكرة التي استهلكتها.
+ومع ذلك، تكون الخصائص [immutable](https://en.wikipedia.org/wiki/Immutable_object)—وهو مصطلح من علم الحوسبة يعني "لا يمكن تغييره". عندما يحتاج المكوّن إلى تغيير خصائصه (على سبيل المثال، ردًا على تفاعل من المستخدم أو بيانات جديدة)، سيضطر إلى "طلب" من مكوّنه الأب تمريره _خصائص مختلفة_—كائن جديد! سيتم رفض الخصائص القديمة ثم سيستعيد محرك JavaScript في نهاية المطاف الذاكرة التي استهلكتها.
 
-**لا تحاول "تغيير الخصائص". ** عندما تحتاج إلى الاستجابة لإدخال المستخدم (مثل تغيير اللون المحدد)، ستحتاج إلى "تعيين الحالة" ، والتي يمكنك التعرف عليها في [الحالة: ذاكرة المكوّن.](/learn/state-a-components-memory)
+**لا تحاول "تغيير الخصائص". ** عندما تحتاج إلى الاستجابة لإدخال المستخدم (مثل تغيير اللون المحدد)، ستحتاج إلى "تعيين الحالة"، والتي يمكنك التعرف عليها في [الحالة: ذاكرة المكوّن.](/learn/state-a-components-memory)
 
 <Recap>
 
 * لتمرير الخصائص، أضفها إلى JSX، تمامًا كما تفعل مع سمات HTML.
 * لقراءة الخصائص، استخدم `function Avatar({ person, size })` صيغة تحليل.
-* يمكنك تحديد قيمة افتراضية مثل `size = 100`, التي تُستخدم في الخصائص الناقصة وغير المُعرّفة 'undefined'.
-* يمكنك توجيه جميع الخصائص باستخدام صيغة الانتشار `<Avatar {...props} />` ، ولكن لا تستخدمها بكثرة!
+* يمكنك تحديد قيمة افتراضية مثل `size = 100`، التي تُستخدم في الخصائص الناقصة وغير المُعرّفة 'undefined'.
+* يمكنك توجيه جميع الخصائص باستخدام صيغة الانتشار `<Avatar {...props} />`، ولكن لا تستخدمها بكثرة!
 * JSX المتداخل مثل `<Card><Avatar /></Card>` سيظهر كخاصية `children` للمكوّن `Card`.
 * تمثل الخصائص لقطات للقراءة فقط في الوقت: يتلقى كل عرض نسخة جديدة من الخصائص.
 * لا بمكنك تغيير الخصائص. عندما تحتاج إلى التفاعلية، ستحتاج إلى تعيين الحالة.
@@ -459,7 +459,7 @@ export default function Gallery() {
           </li>
           <li>
             <b>الجوائز: 4 </b> 
-            (جائزة نوبل في الفيزياء ، جائزة نوبل في الكيمياء ، ميدالية دافي ، ميدالية ماتيوتشي)
+            (جائزة نوبل في الفيزياء، جائزة نوبل في الكيمياء، ميدالية دافي، ميدالية ماتيوتشي)
           </li>
           <li>
             <b>اكتشفت: </b>
@@ -483,7 +483,7 @@ export default function Gallery() {
           </li>
           <li>
             <b>الجوائز: 2 </b> 
-            (جائزة مياكي للجيوكيمياء ، جائزة تاناكا)
+            (جائزة مياكي للجيوكيمياء، جائزة تاناكا)
           </li>
           <li>
             <b>اكتشفت: </b>
@@ -531,9 +531,9 @@ li { margin: 5px; }
 
 <Solution>
 
-في هذا الحل, يقبل مكوّن ال`Profile` العديد من الخصائص: `imageId` (سلسلة), `name` (سلسلة), `profession` (سلسلة), `awards` (مصفوفة من السلاسل), `discovery` (سلسلة), و `imageSize` (عدد).
+في هذا الحل، يقبل مكوّن ال`Profile` العديد من الخصائص: `imageId` (سلسلة)، `name` (سلسلة)، `profession` (سلسلة)، `awards` (مصفوفة من السلاسل)، `discovery` (سلسلة)، و `imageSize` (عدد).
 
-لاحظ أن خاصية `imageSize` لديها قيمة افتراضية ، وهذا هو السبب في عدم تمريرها إلى المكوّن.
+لاحظ أن خاصية `imageSize` لديها قيمة افتراضية، وهذا هو السبب في عدم تمريرها إلى المكوّن.
 
 <Sandpack>
 
@@ -631,9 +631,9 @@ li { margin: 5px; }
 
 </Sandpack>
 
-لاحظ كيف لا تحتاج إلى خاصية `awardCount` منفصلة إذا كانت `awards` مصفوفة. عندها يمكنك استخدام `awards.length` لحساب عدد الجوائز. تذكر أن الخصائص يمكن أن تأخذ أي قيم ، وهذا يشمل المصفوفات أيضًا!
+لاحظ كيف لا تحتاج إلى خاصية `awardCount` منفصلة إذا كانت `awards` مصفوفة. عندها يمكنك استخدام `awards.length` لحساب عدد الجوائز. تذكر أن الخصائص يمكن أن تأخذ أي قيم، وهذا يشمل المصفوفات أيضًا!
 
-حل آخر ، والذي يشبه أكثر الأمثلة السابقة في هذه الصفحة ، هو تجميع جميع المعلومات المتعلقة بشخص ما في كائن واحد ، وتمرير هذا الكائن كخصيصة واحد:
+حل آخر، والذي يشبه أكثر الأمثلة السابقة في هذه الصفحة، هو تجميع جميع المعلومات المتعلقة بشخص ما في كائن واحد، وتمرير هذا الكائن كخصيصة واحد:
 
 <Sandpack>
 
@@ -720,7 +720,7 @@ export function getImageUrl(person, size = 's') {
   margin-top: 20px;
   padding: 10px;
 }
-h1, h2 { margin: 5px; }
+h1، h2 { margin: 5px; }
 h1 { margin-bottom: 10px; }
 ul { padding: 0px 10px 0px 20px; }
 li { margin: 5px; }
@@ -728,7 +728,7 @@ li { margin: 5px; }
 
 </Sandpack>
 
-رغم أن صيغة الجمل تبدو مختلفة قليلاً  لأنك تصف خصائص كائن JavaScript بدلاً من مجموعة من سمات JSX, إلا أن هذه الأمثلة متكافئة إلى حد كبير، ويمكنك اختيار أي منهما.
+رغم أن صيغة الجمل تبدو مختلفة قليلاً  لأنك تصف خصائص كائن JavaScript بدلاً من مجموعة من سمات JSX، إلا أن هذه الأمثلة متكافئة إلى حد كبير، ويمكنك اختيار أي منهما.
 
 </Solution>
 
@@ -736,7 +736,7 @@ li { margin: 5px; }
 
 في هذا المثال، يستلم `Avatar` خاصية رقمية `size` التي تُحدد عرض وارتفاع عنصر `<img>`. قيمة خاصية `size` هي `40` في هذا المثال. ومع ذلك، إذا قمت بفتح الصورة في علامة تبويب جديدة، ستلاحظ أن حجم الصورة نفسها أكبر (`160` بكسل). يتم تحديد حجم الصورة الفعلي بناءً على حجم الصورة المصغرة التي تطلبها.
 
-قم بتغيير مكوّن `Avatar` لطلب أقرب حجم للصورة استنادًا إلى خاصية `size`. على وجه التحديد، إذا كانت قيمة `size` أقل من `90`, فيجب تمرير `'s'` ("small") بدلاً من `'b'` ("big") إلى دالة `getImageUrl`. تحقق من أن التغييرات تعمل عن طريق عرض الصور الرمزية بقيم مختلفة لخاصية `size` وأفتح الصور في علامة تبويب جديدة.
+قم بتغيير مكوّن `Avatar` لطلب أقرب حجم للصورة استنادًا إلى خاصية `size`. على وجه التحديد، إذا كانت قيمة `size` أقل من `90`، فيجب تمرير `'s'` ("small") بدلاً من `'b'` ("big") إلى دالة `getImageUrl`. تحقق من أن التغييرات تعمل عن طريق عرض الصور الرمزية بقيم مختلفة لخاصية `size` وأفتح الصور في علامة تبويب جديدة.
 
 <Sandpack>