JSX çərçivəsində JavaScript kodunda nə yazmaq olmaz?

Aşağıdakı quruluşların istifadəsinə icazə verilmir:

• Təyin operatorları (deyil, atributlar daxilində qiymət təyin edilən yerlər istisnadır).
• Aydın geri dönüş olmadan ternary operatoru (?:).
• Döngülər (for, while, do/while) JSX elementləri qaytaran funksiyalar daxilində olmadan.
• if/else bəyanatları JSX elementləri qaytaran funksiyalar daxilində olmadan və ya ternary operatorundan istifadə edilmədən.
• Kod blokları ({}) açıq JSX elementləri qaytarmadan (məsələn, sadəcə dəyişənlərin elan edilməsi).
• İç-içə şərhlər // JSX daxilində və ya /* JSX daxilində */, operatorlar və ya atributlar/aralıqlar arasında şərhlər istisnadır.

İstifadə etmək olar:

• Dəyər qaytaran ifadələr (dəyişənlər, funksiyalar, metod çağırışları).
• Məntiqi operatorlar && və ||.
• Ternary operator ? :.
• Obektlər və massivlər (əgər onlar siyahı və ya element kimi render olunursa).
• Array metodlarının çağırışları (map, filter və s.), JSX elementləri qaytaran.
• JSX elementləri qaytaran funksiyalar.

Nümunə

// İcazə verilmir
const element = <p>
  let x = 10; // Təyin
  x++; // Artırma
</p>;

// İcazə verilmir
const element = <p>
  if (condition) { // if bəyanatı
    return 'True';
  } else {
    return 'False';
  }
</p>;

// Funksiyalarla icazə verilir
const renderContent = (condition) => {
  if (condition) {
    return <p>'True'</p>;
  } else {
    return <p>'False'</p>;
  }
};
const element = <div>{renderContent(true)}</div>;

// Ternary operatoru ilə icazə verilir
const element = <p>{condition ? 'True' : 'False'}</p>;

// && ilə icazə verilir
const element = <div>{condition && <p>Visible</p>}</div>;

// map ilə icazə verilir
const listItems = items.map(item => <li key={item.id}>{item.name}</li>);
const element = <ul>{listItems}</ul>;