Display functional component name in react-no-dangerous-html

[feimosi]

Bug Report

• tslint-microsoft-contrib version: 6.2.0
• TSLint version: 5.18.0
• TypeScript version: 3.5.3
• Running TSLint via: CLI

TypeScript code being linted

export default function Reply({ reply }: Props) {
  return (
    <div className="Reply">
      ...
      <span
        dangerouslySetInnerHTML={ {
          __html: reply.content
        } }
      />
      ...
    </div>
  );
}

with tslint.json configuration:

{
...
    "react-no-dangerous-html": [true, [{
        "file": "src/common/Reply/Reply.tsx",
        "method": "<unknown>",
        "comment": "Approved"
    }]],
...
}

Actual behavior

Linter outputs:

> Invalid call to dangerouslySetInnerHTML in method "<unknown>". 

Expected behavior

Would be great to specify function (component) name if method is not available. That would also address having multiple functions in a single file.

[ChaiWithJai]

Hey, @JoshuaKGoldberg we met a few months back at TS NYC. Would love to take a crack at this if no one is currently working on this.

[JoshuaKGoldberg]

Oh hi @JBhagat841, good to hear from you! 🙌

Sure, it looks like nobody is tackling this so far. It looks like you'd want to traverse up the AST from the complaint method until you find a function that either has a name or is in a variable with a name.

By the way, it's good to keep https://github.com/palantir/tslint/issues/4534 in mind. We're adhering to that schedule here and will absolutely take a look at any PR you send here before November 1st. You might want to focus more efforts on https://typescript-eslint.io soon.

[ChaiWithJai]

Thanks! Will take a look at this later in the week!

[JoshuaKGoldberg]

☠️ It's time! ☠️

Per #876, this repository is no longer accepting feature pull requests. TSLint is being deprecated and we recommend you switch to https://typescript-eslint.io.

Thanks for open sourcing with us, everyone!