Czego nie wolno pisać w kodzie JavaScript w ramach JSX?

Nie wolno używać następujących konstrukcji:

• Operatorów przypisania (z wyjątkiem wewnątrz atrybutów, gdzie przypisywana jest wartość).
• Operator ternarny bez jawnego zwrotu wartości (?:).
• Pętli (for, while, do/while) bez opakowania w funkcje zwracające elementy JSX.
• Instrukcji if/else bez opakowania w funkcje zwracające elementy JSX lub bez użycia operatora ternarnego.
• Bloków kodu ({}) bez jawnego zwrotu elementów JSX (np. tylko deklaracje zmiennych).
• Zagnieżdżonych komentarzy // w JSX lub /* w JSX */, z wyjątkiem komentarzy po operatorach lub między atrybutami/elementami.

Dozwolone jest używanie:

• Wyrażeń zwracających wartości (zmiennych, funkcji, wywołań metod).
• Operatorów logicznych && i ||.
• Operatora ternarnego ? :.
• Obiektów i tablic (jeśli są renderowane jako lista lub element).
• Wywołań metod tablic (map, filter, itp.), które zwracają elementy JSX.
• Funkcji zwracających elementy JSX.

Przykład

// Niedozwolone
const element = <p>
  let x = 10; // Przypisanie
  x++; // Inkrementacja
</p>;

// Niedozwolone
const element = <p>
  if (condition) { // Instrukcja if
    return 'True';
  } else {
    return 'False';
  }
</p>;

// Dozwolone z użyciem funkcji
const renderContent = (condition) => {
  if (condition) {
    return <p>'True'</p>;
  } else {
    return <p>'False'</p>;
  }
};
const element = <div>{renderContent(true)}</div>;

// Dozwolone z operatorem ternarnym
const element = <p>{condition ? 'True' : 'False'}</p>;

// Dozwolone z &&
const element = <div>{condition && <p>Visible</p>}</div>;

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