Čo nie je povolené písať v JavaScript kóde v rámci JSX?

Nie je povolené používať nasledujúce konštrukcie:

• Operátory priradenia (okrem v atribútoch, kde sa priraďuje hodnota).
• Ternárny operátor bez explicitného návratu hodnoty (?:).
• Cyklus (for, while, do/while) bez zabalenia do funkcií, ktoré vracajú JSX prvky.
• Príkazy if/else bez zabalenia do funkcií, ktoré vracajú JSX prvky, alebo bez použitia ternárneho operátora.
• Bloky kódu ({}) bez explicitného návratu JSX prvkov (napríklad len deklarácie premenných).
• Vnorené komentáre // vo vnútri JSX alebo /* vo vnútri JSX */, okrem komentárov po operátoroch alebo medzi atribútmi/prvkami.

Je povolené používať:

• Výrazy, ktoré vracajú hodnoty (premenné, funkcie, volania metód).
• Logické operátory && a ||.
• Ternárny operátor ? :.
• Objekty a polia (ak sú renderované ako zoznam alebo prvok).
• Volania metód polí (map, filter, atď.), ktoré vracajú JSX prvky.
• Funkcie, ktoré vracajú JSX prvky.

Príklad

// Nepovolené
const element = <p>
  let x = 10; // Priradenie
  x++; // Inkrement
</p>;

// Nepovolené
const element = <p>
  if (condition) { // if príkaz
    return 'True';
  } else {
    return 'False';
  }
</p>;

// Povolené s použitím funkcií
const renderContent = (condition) => {
  if (condition) {
    return <p>'True'</p>;
  } else {
    return <p>'False'</p>;
  }
};
const element = <div>{renderContent(true)}</div>;

// Povolené s ternárnym operátorom
const element = <p>{condition ? 'True' : 'False'}</p>;

// Povolené s &&
const element = <div>{condition && <p>Visible</p>}</div>;

// Povolené s map
const listItems = items.map(item => <li key={item.id}>{item.name}</li>);
const element = <ul>{listItems}</ul>;