اختبار الوحدة: الـ Components والـ Props

السؤال 1 من 5

• علامات الاقتباس تمرّر النص “false”، وأي نص غير فارغ قيمته truthy. مرّر watched={false} بدلًا من ذلك.
• الـ props المنطقية يجب أن تُكتب دائمًا كخاصية مجرّدة.
• المعامل && لا يعمل مع الـ props.
• القيمة الافتراضية في الـ component تتغلّب على الـ prop.

السؤال 2 من 5

function MovieItem({ movie }) {
  return <li key={movie.id}>{movie.title}</li>;
}

{movies.map((movie) => <MovieItem movie={movie} />)}

• القيمة movie.id ليست فريدة بما يكفي؛ استخدم الـ index.
• الـ <ul> حول القائمة يحتاج إلى key.
• الـ keys تعمل على عناصر HTML فقط، لا على الـ components.
• يجب أن يوضع الـ key على <MovieItem key={movie.id} … /> داخل map، لا على الـ <li> داخل الـ component.

السؤال 3 من 5

• prop اسمه buttons فيه مصفوفة من نصوص التسميات، ويُنشئ Dialog الأزرار ومعالجات النقر الخاصة بها.
• title كـ prop، والجسم كـ children، وprop اسمه footer يأخذ JSX مثل footer={<button onClick={close}>Close</button>}.
• component Dialog خاص بكل استخدام، يُنسخ ويُعدَّل في كل مرة.
• مرّر الـ markup الكامل للنافذة كنص HTML.

السؤال 4 من 5

• Math.random()، حتى تكون الـ keys فريدة دائمًا.
• الـ index، لأن القائمة قصيرة.
• نص النوع نفسه، لأنه فريد داخل القائمة وثابت.
• بلا key، لأن النصوص لا تحتاج إلى keys.

السؤال 5 من 5

• const upper = title.toUpperCase(); return <h2>{upper}</h2>;
• props.title = props.title.toUpperCase(); return <h2>{props.title}</h2>;
• const [upper] = useState(title.toUpperCase()); ثم اعرض upper.
• useEffect(() => setUpper(title.toUpperCase()), [title]); ثم اعرض upper.