no-complex-conditional-rendering

react-x/no-complex-conditional-rendering

@eslint-react/no-complex-conditional-rendering

function MyComponent({ condition1, condition2, condition3, condition4 }) {
  return <div>{condition1 || condition2 ? <div>X</div> : condition3 || condition4 ? <div>Y</div> : null}</div>;
}

function MyComponent({ condition1, condition2, condition3, condition4 }) {
  const shouldDisplayX = condition1 || condition2;
  const shouldDisplayY = condition3 || condition4;
  return (
    <div>
      {shouldDisplayX && <div>X</div>}
      {shouldDisplayY && <div>Y</div>}
    </div>
  );
}