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.