العناصر لا تظهر عند إستعمال map داخل مكون React

Emad Saif · 21 يونيو 2022

لدي مصفوفة موجودة في state وأريد أن أقوم بعرض عناصر هذه المصفوفة داخل عناصر <li>، لذلك قمت بكتابة الكود التالي:

import * as React from 'react';

export default function App() {
  const [elements, setElements] = React.useState([1,2,3,4,5]);
  return (
    <div>
      <ul>
        {
         elements.map(function(item, i){
           console.log(item);
           <li>{item}</li>
         })
       }
      </ul>
    </div>
  )
}

المشكلة هنا هي أنه يتم طباعة الأرقام في الـ console ولكن لا تظهر عناصر li في الصفحة.

ما المشكلة هنا؟ وكيف أقوم بحلها؟

تم التعديل في 21 يونيو 2022 بواسطة Emad Saif

Wael Aljamal · 21 يونيو 2022

المشكلة هو أن دالة map سوف تقوم بتنفيذ callback function لكك عنصر، ولكن يجب أن تعيد ذلك العنصر لكل تكرار أي تعمل return له، بدون عمل return لن يتم إضافة العنصر li للصفحة.

elements.map(function(item, i){
  console.log(item);
  return <li>{item}</li>
})

لكن سيظهر إخطار من الشيفرة السابقة، حيث يجب لكل عنصر قائمة أن يكون له مفتاح مميز لتمييزه.

وبذلك نضيف خاصية key و نعطي قيمة مختلفة لكل عنصر ولنفرض دليل العنصر ضمن القائمة، فنقوم بتمرير i له.

elements.map(function(item, i){
  console.log(item);
  return <li key={i}>{item}</li>
})

العناصر لا تظهر عند إستعمال map داخل مكون React

السؤال

Emad Saif

1 جواب على هذا السؤال

Recommended Posts

Wael Aljamal

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية