في مشروع React عند استدعاء مكون </Prayer> الذي قمت بإنشائه تختفي جميع العناصر

يرجى مستقبلا إرفاق مجلد المشورع كاملا وليس مجلد src فقط. وذلك للحصول على ملف package.json الخاص بالحزم والملفات الموجودة في public.

المشكلة لديك في مكون Prayer في ملف src\components\index.jsx حيث لاحظ أنك إستقبلت معاملين وهذا خاطئ حيث يتم إستقبال معامل واحد فقط وهو props .

أما إذا إردت أن تستخدم object destruction في js فيجب وضع الأقواس المعقوفة {} هكذا :

export default function Prayer({ name, time }) {

ويجب أن تقوم بتمريرهم للمكون Prayer عند إستدعاءه.

المشكلة في مكون Prayer حيث قمت بتعريفه كالتالي:

export default function Prayer(name, time) {

}

لكن في React، يجب أن تستقبل المكونات معامل واحد وهو props وليس معاملين، بالتالي عند استدعائك <Prayer /> بدون تمرير أي خصائص، تكون القيم غير معرفة، ويؤدي ذلك إلى مشاكل في العرض.

يجب وضع الخصائص بين  { } في حال أردت استقبالهم مباشرًة بدلاً من كتابة props، وذلك يسمى object destruction في جافاسكريبت، وذلك لتفكيك كائن props الخاص بالمكون:

export default function Prayer({ name, time }) {

}

ثم في ملف App.jsx يجب تمريرهم كالتالي:

<Prayer name="الفجر" time="04:00" />

في المكون Prayer لم تقم بتعريف الكائن  props حتى تستطيع تمرير المعاملات name وtime ولذلك يرجى تعديل المكون Prayers كالتالي

export default function Prayer(props) {
    return (
        <div>
            <p className="name-prayer">{props.name}</p>
            <p className="time-prayer">{props.time}</p>
        </div>
    )
}

يمكنك أيضاً استخدام الطريقة destructuring  كما أعتقد أنك أردت ذلك ولكن يجب إضافة المعاملات name وtime  بداخل { } لتصبح كالتالي

export default function Prayer({ name, time }) {
    return (
        <div>
            <p className="name-prayer">{name}</p>
            <p className="time-prayer">{time}</p>
        </div>
    )
}

واضح أن المشكلة لديك ناتجة عن طريقة تعريف مكون Prayer.

في الملف index.jsx داخل مجلد components، قمت بكتابة:

export default function Prayer(name, time) { 
return ( 
	<div> 
      <p className="name-prayer">{name}</p> 
  	  <p className="time-prayer">{time}</p> 
	</div> 
	); 
}

وهذا غير صحيح لأن مكونات React تستقبل الخصائص (props) كمُعطى واحد، وليس بشكل منفصل.

الحل:

قم بتعديل المكون ليبدو بهذا الشكل:

export default function Prayer({ name, time }) { 
    return ( 
      <div> 
      <p className="name-prayer">{name}</p> 
      <p className="time-prayer">{time}</p> 
      </div> 
    ); 
  }

وبعدها في App.jsx، استخدمه هكذا:

<Prayer name="الظهر" time="12:00 م" />

• عند استدعاء <Prayer /> بدون تمرير خصائص، name و time سيكونان undefined.
• تأكد أن import Prayer from "./components" فعلاً يشير إلى index.jsx داخل مجلد components.