Что не допускается писать в JavaScript коде в рамках JSX?

Не допускается использовать следующие конструкции:

• Операторы присваивания (кроме внутри атрибутов, где присваивается значение).
• Тернарный оператор без явного возврата значения (?:).
• Циклы (for, while, do/while) без обертки в функции, возвращающие JSX-элементы.
• Инструкции if/else без обертки в функции, возвращающие JSX-элементы, или без использования тернарного оператора.
• Блоки кода ({}) без явного возврата JSX-элементов (например, просто объявление перемен
• Вложенные комментарии // внутри JSX или /* внутри JSX */, кроме комментариев после операторов или между атрибутами/элементами.

Допустимо использовать:

• Выражения, возвращающие значения (переменные, функции, вызовы методов).
• Логические операторы && и ||.
• Тернарный оператор ? :.
• Объекты и массивы (если они рендерятся в виде списка или элемента).
• Вызовы методов массивов (map, filter, etc.), возвращающих JSX-элементы.
• Функции, возвращающие JSX-элементы.

Приме

// Недопустимо
const element = <p>
  let x = 10; // Присваивание
  x++; // Инкремент
</p>;

// Недопустимо
const element = <p>
  if (condition) { // Инструкция if
    return 'True';
  } else {
    return 'False';
  }
</p>;

// Допустимо с использованием функций
const renderContent = (condition) => {
  if (condition) {
    return <p>'True'</p>;
  } else {
    return <p>'False'</p>;
  }
};
const element = <div>{renderContent(true)}</div>;

// Допустимо с тернарным оператором
const element = <p>{condition ? 'True' : 'False'}</p>;

// Допустимо с &&
const element = <div>{condition && <p>Visible</p>}</div>;

// Допустимо с map
const listItems = items.map(item => <li key={item.id}>{item.name}</li>);
const element = <ul>{listItems}</ul>;