Cosa non è consentito scrivere nel codice JavaScript all'interno di JSX?

Non è consentito utilizzare le seguenti strutture:

• Operatori di assegnazione (tranne all'interno degli attributi, dove viene assegnato un valore).
• Operatore ternario senza un ritorno di valore esplicito (?:).
• Cicli (for, while, do/while) senza essere racchiusi in funzioni che restituiscono elementi JSX.
• Istruzioni if/else senza essere racchiuse in funzioni che restituiscono elementi JSX, o senza usare l'operatore ternario.
• Blocchi di codice ({}) senza un ritorno esplicito di elementi JSX (ad esempio, solo dichiarazioni di variabili).
• Commenti annidati // dentro JSX o /* dentro JSX */, tranne commenti dopo operatori o tra attributi/elementi.

È consentito usare:

• Espressioni che restituiscono valori (variabili, funzioni, chiamate a metodi).
• Operatori logici && e ||.
• Operatore ternario ? :.
• Oggetti e array (se vengono renderizzati come lista o elemento).
• Chiamate a metodi di array (map, filter, ecc.) che restituiscono elementi JSX.
• Funzioni che restituiscono elementi JSX.

Esempio

// Non consentito
const element = <p>
  let x = 10; // Assegnamento
  x++; // Incremento
</p>;

// Non consentito
const element = <p>
  if (condition) { // Istruzione if
    return 'True';
  } else {
    return 'False';
  }
</p>;

// Consentito con funzioni
const renderContent = (condition) => {
  if (condition) {
    return <p>'True'</p>;
  } else {
    return <p>'False'</p>;
  }
};
const element = <div>{renderContent(true)}</div>;

// Consentito con operatore ternario
const element = <p>{condition ? 'True' : 'False'}</p>;

// Consentito con &&
const element = <div>{condition && <p>Visible</p>}</div>;

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