Co není povoleno psát v JavaScriptovém kódu v rámci JSX?

Není povoleno používat následující konstrukce:

• Přiřazovací operátory (kromě uvnitř atributů, kde se přiřazuje hodnota).
• Ternární operátor bez explicitního návratu hodnoty (?:).
• Smyčky (for, while, do/while) bez zabalení do funkcí, které vracejí JSX prvky.
• Příkazy if/else bez zabalení do funkcí, které vracejí JSX prvky, nebo bez použití ternárního operátoru.
• Bloky kódu ({}) bez explicitního návratu JSX prvků (například pouze deklarace proměnných).
• Vnořené komentáře // uvnitř JSX nebo /* uvnitř JSX */, s výjimkou komentářů po operátorech nebo mezi atributy/prvky.

Je povoleno používat:

• Výrazy, které vracejí hodnoty (proměnné, funkce, volání metod).
• Logické operátory && a ||.
• Ternární operátor ? :.
• Objekty a pole (pokud jsou renderovány jako seznam nebo prvek).
• Volání metod polí (map, filter, atd.), které vracejí JSX prvky.
• Funkce, které vracejí JSX prvky.

Příklad

// Nepovolené
const element = <p>
  let x = 10; // Přiřazení
  x++; // Inkrementace
</p>;

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

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

// Povolené s ternárním operátorem
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>;