Ce nu este permis să se scrie în codul JavaScript în cadrul JSX?

Nu sunt permise următoarele construcții:

• Operatorii de atribuire (cu excepția în interiorul atributelor, unde se atribuie o valoare).
• Operatorul ternar fără returnare explicită a valorii (?:).
• Bucle (for, while, do/while) fără a fi învelite în funcții care returnează elemente JSX.
• Instrucțiuni if/else fără a fi învelite în funcții care returnează elemente JSX sau fără utilizarea operatorului ternar.
• Blocuri de cod ({}) fără returnare explicită a elementelor JSX (de exemplu, doar declarații de variabile).
• Comentarii înglobate // în JSX sau /* în JSX */, cu excepția comentariilor după operatori sau între atribute/elemente.

Se permite utilizarea:

• Expresii care returnează valori (variabile, funcții, apeluri de metode).
• Operatorii logici && și ||.
• Operatorul ternar ? :.
• Obiecte și array-uri (dacă sunt randate ca listă sau element).
• Apeluri de metode de array (map, filter, etc.) care returnează elemente JSX.
• Funcții care returnează elemente JSX.

Exemplu

// Nu permis
const element = <p>
  let x = 10; // Atribuire
  x++; // Incrementare
</p>;

// Nu permis
const element = <p>
  if (condition) { // Instrucțiune if
    return 'True';
  } else {
    return 'False';
  }
</p>;

// Permis cu utilizarea funcțiilor
const renderContent = (condition) => {
  if (condition) {
    return <p>'True'</p>;
  } else {
    return <p>'False'</p>;
  }
};
const element = <div>{renderContent(true)}</div>;

// Permis cu operator ternar
const element = <p>{condition ? 'True' : 'False'}</p>;

// Permis cu &&
const element = <div>{condition && <p>Visible</p>}</div>;

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