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

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

Then tell us:

  • What language is this for?
  • Which rule?
  • 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.

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>;


Sure! Thanks for adding this to the list.