hluisson / eslint-plugin-jsx-expressions

Rules for safe logical expressions in JSX
96 stars 14 forks source link

Linting rule only checks inline jsx #11

Open steffenkleinle opened 1 year ago

steffenkleinle commented 1 year ago

Problem: Only inline jsx is checked, jsx that is returned from functions or assigned to variables is not checked.

Example: While all of the three examples below are semantically identical, the linter only shows the error (Potentially falsey number in logical AND expression. Please use boolean – jsx-expressions/strict-logical-expressions) for Example3 and not for the other examples.

const Example1 = ({ num }: { num: number }) => {
  const JSX = num && <div />

  return <>{JSX}</>
}

const Example2 = ({ num }: { num: number }) => {
  const jsx = () => num && <div />

  return <>{jsx()}</>
}

const Example3 = ({ num }: { num: number }) => {
  return <>{num && <div />}</>
}