jsx-no-complex-expressions.md

Disallow complex expressions embedded in in JSX. (jsx-no-complex-expressions)

Having complex conditionals embedded in JSX can make it harder to read. This rule aims to improve the readability of JSX by preventing the use of complex expressions.

Rule details

The following pattern is considered a warning:

function MyComponent({visible}) {
  return <div className={visible ? classNames(styles.MyComponent, styles.visible) : styles.Hidden} />;
}

The following patterns are not warnings:

function MyComponent({visible}) {
  const className = visible ? classNames(styles.MyComponent, styles.visible) : styles.Hidden;
  return <div className={className} />;
}

function MyComponent({visible}) {
  return <div className={visible && styles.Visible} />;
}