الدوران على قائمة داخل react jsx

مرحبًا @Rayden Storm،

لايمكنك استخدام هذه الطريقة لعرض بيانات داخل عنصر div

فلا يمكنك كتابة الحلقات واكواد الجافا سكريبت داخل return و داخل HTML مباشرة.

يجب عليك استخدام مصفوفة فارغة وقم بارسال بيانات الحلقة إلى داخل العنصر الذي تريد كما في المثال التالي:

function Home(){
  
  // المصفوفة التي تريد تكرارها
  	
  const list = ['ahmed', 'mohammed', 'marwan', 'etc'];
  
  // مصفوفة فارغة لإضافة عناصر HTML التي تريدها
  
  const resultHtml = [];

  // حلقة ﻹضافة العناصر إلى المصفوفة الفارغة
    for(var i=0; i<list.length ; i++){
      
      resultHtml.push(<span>{list[i]}</span>)
                      
       }
     // طباعة المصفوفة المطلوبة
                      
   return(
            <div>

              {resultHtml}
                      
            <div> 
         )
    }

أتمنى لك التوفيق.

jsx هو عبارة على javascript نعم لكن هذا لا يخولك لاستخدام كود javascript بالطريقة المعتادة فعناصر ال jsx هي في الحقيقة دوال واذا ترجمنا الكود الذي ارفقته في السؤال فسيكون كالتالي 

return div(
    for (var i = 0; i < list.length; i++) {
        post
    } 
)

وفي javascript لا يمكننا كتابة كود في منطقة المعاملات لدالة ما ولكن يمكننا توفير المعاملات فقط لذا فالطريقة الصحيحة للوصول لذلك هي اعطاء معامل لعنصر jsx هكذا 

<div>{title}</div>

هذا سيترجم الى 

return div(title)

وهذا كود javascript صحيح ويمكنك تطبيقه في مثالك بهذه الطريقة :

<div>
  { list.map((res)=> (
   
        <post list={res} />
  ))} 
</div>