# 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:

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

The following patterns are not warnings:

```js
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} />;
}
```