Qu'est-ce qui n'est pas autorisé à écrire dans le code JavaScript dans le cadre de JSX?

Il n'est pas autorisé d'utiliser les constructions suivantes :

• Opérateurs d'affectation (sauf à l'intérieur des attributs où une valeur est affectée).
• Opérateur ternaire sans retour explicite de valeur (?:).
• Boucles (for, while, do/while) sans enveloppe dans des fonctions renvoyant des éléments JSX.
• Instructions if/else sans enveloppe dans des fonctions renvoyant des éléments JSX, ou sans utiliser l'opérateur ternaire.
• Blocs de code ({}) sans retour explicite d'éléments JSX (par exemple, déclaration de variables uniquement).
• Commentaires imbriqués // dans JSX ou /* dans JSX */, sauf commentaires après des opérateurs ou entre attributs/éléments.

Il est permis d'utiliser :

• Expressions renvoyant des valeurs (variables, fonctions, appels de méthodes).
• Opérateurs logiques && et ||.
• Opérateur ternaire ? :.
• Objets et tableaux (s'ils sont rendus sous forme de liste ou d'élément).
• Appels de méthodes de tableaux (map, filter, etc.) renvoyant des éléments JSX.
• Fonctions renvoyant des éléments JSX.

Exemple

// Non autorisé
const element = <p>
  let x = 10; // Affectation
  x++; // Incrément
</p>;

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

// Autorisé avec utilisation de fonctions
const renderContent = (condition) => {
  if (condition) {
    return <p>'True'</p>;
  } else {
    return <p>'False'</p>;
  }
};
const element = <div>{renderContent(true)}</div>;

// Autorisé avec opérateur ternaire
const element = <p>{condition ? 'True' : 'False'}</p>;

// Autorisé avec &&
const element = <div>{condition && <p>Visible</p>}</div>;

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