Package Exports

eslint-plugin-jsx-conditional

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (eslint-plugin-jsx-conditional) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Enforces a consistent use of conditional expressions in jsx (jsx-conditional/jsx-conditional)

Enforce or forbid the use of conditionals expressions using a ternary or a logical expression using an AND && operator in JSX. In other words, it allows to keep a consistent use of the way jsx elements are showned based on a condition

Fixable: This rule is automatically fixable by using the --fix option on the command line.

Rule details

This rule checks that conditionals expressions or logical expression match a certain shape.

Options

This rule accepts an argument that can be one of two possible values:

prefer-ternary
prefer-and-operator

The default value is prefer-ternary.

`prefer-ternary`

This option will check for logical expressions inside JSX code and if it finds a logical expression that follows the following shape:

<>{identifier && JSXElement | JSXFragment}</>

And this would be auto fixable outputing the following code

<>{identifier ? JSXElement | JSXFragment : null}</>

Examples

✅ Examples of valid code:

function Component({ propA }) {
  return <>{propA ? <span>Hello</span> : null}</>;
}

function Component({ propA }) {
  return <>{propA ? <span>Hello</span> : <span>Hello</span>}</>;
}

function Component({ propA }) {
  return (
    <>
      {propA ? (
        <>
          <span>Hello</span>
          <span>Hello 2</span>
        </>
      ) : null}
    </>
  );
}

❌ Examples of invalid code:

function Component({ propA }) {
  return <>{propA && <span>Hello</span>}</>;
}

function Component({ propA }) {
  return (
    <>
      {propA && <span>Hello</span>}
      {!propA && <span>Hello</span>}
    </>
  );
}

function Component({ propA }) {
  return (
    <>
      {propA && (
        <>
          <span>Hello</span>
          <span>Hello 2</span>
        </>
      )}
    </>
  );
}

`prefer-and-operator`

This option will check for conditional expressions inside JSX code and if it finds a conditional expression that follows the following shape:

<>{identifier ? JSXElement | JSXFragment : null}</>

And this would be auto fixable outputing the following code

<>{identifier && JSXElement | JSXFragment}</>

Examples

✅ Examples of valid code:

function Component({ propA }) {
  return <>{propA && <span>Hello</span>}</>;
}

function Component({ propA }) {
  return (
    <>
      {propA && <span>Hello</span>}
      {!propA && <span>Hello</span>}
    </>
  );
}

function Component({ propA }) {
  return (
    <>
      {propA && (
        <>
          <span>Hello</span>
          <span>Hello 2</span>
        </>
      )}
    </>
  );
}

❌ Examples of invalid code:

function Component({ propA }) {
  return <>{propA ? <span>Hello</span> : null}</>;
}

function Component({ propA }) {
  return <>{propA ? <span>Hello</span> : <span>Hello</span>}</>;
}

function Component({ propA }) {
  return (
    <>
      {propA ? (
        <>
          <span>Hello</span>
          <span>Hello 2</span>
        </>
      ) : null}
    </>
  );
}

When not to use it

You can decide to not use it or turn it off if you are not concerned about the consistency of rendering elements based on a condition, either by using a ternary operator or using a logical expression