False positive for typescript:S6754, not taking into account title-capped variable names

[landisdesign (Michael Landis)]

Make sure to read this post before raising a thread here:

How to Report a False-positive / False-negative

Hey SonarSource Community! False-positives happen, as do false-negatives, and we’re eager to fix them. We are thrilled when our users report problems, so we can make our products better. What is a false-positive (FP)? A false-positive is when an issue is raised unexpectedly on code that should not trigger an issue, or where the suggested action doesn’t make any sense for the code. What is a false-negative (FN)? A false-negative is when an issue should be raised on a piece of code, but isn’t…

Then tell us:

• What language is this for?
  React/TypeScript
• Which rule?
  typescript:S6754
• Why do you believe it’s a false-positive/false-negative?
  It is not taking into account title-capped state variable names when comparing the state and its setter. React requires title-capped variable names for components.
• Are you using
  • SonarCloud
• How can we reproduce the problem? Give us a self-contained snippet of code (formatted text, no screenshots)

This is the offending code:

const [Component, setComponent] = useState(() => modalFlowComponents.signin.component);

In this case, the useState result is properly destructured, and the variable names are symmetrical. It looks like the code is looking at the setter name and trying to lower-case it to determine the state variable name, but that won’t work when the state variable is title-capped to allow it to be used as a component in JSX/TSX.

[victor.diez]

Hello @landisdesign,

thanks for reporting this. I created a ticket to fix this FP.

In the meantime, you can use the following workaround:

const [component, setComponent] = useState(() => modalFlowComponents.signin.component);

// workaround
const Component = component;

return <Component></Component>;

Thanks!
Victor

[landisdesign (Michael Landis)]

Sure! Thanks for adding this to the list.

[JohnGurin (John G)]

Seme here but with different usage

const isOpenDispatcher = useState(false)

useState call is not destructured into value + setter pairsonarlint(typescript:S6754)

[Yassin (Yassin Kammoun)]

Hello @JohnGurin,

Welcome back to the Sonar community

We haven’t had the opportunity to address this issue yet, but the use case you’re sharing will be taken into account as well during implementation. It is tracked with the same ticket created by my colleague @victor.diez

Hope this helps,
Yassin

[JohnGurin (John G)]

I pass it to a child component. The parent may use, for example, getter and the child may use both.