Wat mag niet worden geschreven in JavaScript-code binnen JSX?

Het is niet toegestaan om de volgende constructies te gebruiken:

• Toewijzingsoperatoren (behalve binnen attributen waar een waarde wordt toegekend).
• Ternary operator zonder expliciete waarde terug te geven (?:).
• Lussen (for, while, do/while) zonder te worden ingepakt in functies die JSX-elementen retourneren.
• if/else instructies zonder te worden ingepakt in functies die JSX-elementen retourneren, of zonder gebruik van de ternary operator.
• Codeblokken ({}) zonder expliciete terugkeer van JSX-elementen (bijvoorbeeld alleen variabelen declaraties).
• Geneste commentaren // binnen JSX of /* binnen JSX */, behalve commentaren na operators of tussen attributen/elementen.

Het gebruik van is toegestaan:

• Uitdrukkingen die waarden teruggeven (variabelen, functies, methodenaanroepen).
• Logische operatoren && en ||.
• Ternary operator ? :.
• Objecten en arrays (als ze worden gerenderd als lijst of element).
• Aanroepen van array-methoden (map, filter, enz.) die JSX-elementen retourneren.
• Functies die JSX-elementen retourneren.

Voorbeeld

// Niet toegestaan
const element = <p>
  let x = 10; // Toewijzing
  x++; // Increment
</p>;

// Niet toegestaan
const element = <p>
  if (condition) { // if-instructie
    return 'True';
  } else {
    return 'False';
  }
</p>;

// Toegestaan met gebruik van functies
const renderContent = (condition) => {
  if (condition) {
    return <p>'True'</p>;
  } else {
    return <p>'False'</p>;
  }
};
const element = <div>{renderContent(true)}</div>;

// Toegestaan met ternary operator
const element = <p>{condition ? 'True' : 'False'}</p>;

// Toegestaan met &&
const element = <div>{condition && <p>Visible</p>}</div>;

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