Ką draudžiama rašyti JavaScript kode JSX kontekste?

Nepateisin naudoti šias konstrukcijas:

• Priskyrimo operatorius (išskyrus atributuose, kur priskiriama reikšmė).
• Ternarinis operatorius be aiškaus grąžinimo (?:).
• Ciklus (for, while, do/while) be funkcijos apvalkalo, grąžinančios JSX elementus.
• if/else instrukcijos be funkcijos apvalkalo, grąžinančios JSX elementus, arba be ternarinio operatoriaus.
• Kodo blokai ({}) be aiškaus JSX elementų grąžinimo (pvz., tik kintamųjų deklaravimas).
• Įdėti komentarai // JSX viduje arba /* JSX viduje */, išskyrus komentarus po operatorių arba tarp atributų/elementų.

Leidžiama naudoti:

• Išraiškas, grąžinančias reikšmes (kintamuosius, funkcijas, metodų iškvietimus).
• Loginio AND && ir OR || operatorius.
• Ternarinį operatorių ? :.
• Objektus ir masyvus (jei jie yra rikiuojami kaip sąrašas arba elementas).
• Masyvų metodų iškvietimus (map, filter ir kt.), grąžinančius JSX elementus.
• Funkcijas, grąžinančias JSX elementus.

Pavyzdys

// Neleidžiama
const element = <p>
  let x = 10; // Priskyrimas
  x++; // Padidinimas
</p>;

// Neleidžiama
const element = <p>
  if (condition) { // `if` instrukcija
    return 'True';
  } else {
    return 'False';
  }
</p>;

// Leidžiama naudojant funkcijas
const renderContent = (condition) => {
  if (condition) {
    return <p>'True'</p>;
  } else {
    return <p>'False'</p>;
  }
};
const element = <div>{renderContent(true)}</div>;

// Leidžiama naudojant ternarinį operatorių
const element = <p>{condition ? 'True' : 'False'}</p>;

// Leidžiama su &&
const element = <div>{condition && <p>Visible</p>}</div>;

// Leidžiama su map
const listItems = items.map(item => <li key={item.id}>{item.name}</li>);
const element = <ul>{listItems}</ul>;