Eslint-plugin-react: Rule proposal: prevent both children and dangerouslySetInnerHTML at the same time

[lencioni]

React will issue a warning if you try to use dangerouslySetInnerHTML and children at the same time.

https://github.com/facebook/react/blob/85dcbf83/src/renderers/dom/shared/ReactDOMComponent.js#L170

This should be easy enough to enforce for most cases with a linter rule.

Bad:

<div dangerouslySetInnerHTML={{ __html: 'HTML' }}>
  Children
</div>

Good:

<div dangerouslySetInnerHTML={{ __html: 'HTML' }} />

<div>
  Children
</div>

[petersendidit]

I can work on this. What should this rule be named? jsx-no-children-and-dangerouslySetInnerHTML ?

[ljharb]

The rule needs to be all lowercase - maybe jsx-no-danger-with-children?

[lencioni]

Since this is scoped to DOM elements, perhaps that should be part of the name? In #709 we settled on void-dom-elements-no-children, so perhaps this should be dom-elements-children-or-inner-html or dom-elements-no-inner-html-with-children (or dom-elements-no-danger-with-children, but I worry that "danger" may end up being too broad at some point)?

I think that the dangerouslySetInnerHTML is a React thing, not a JSX thing, so I'm not sure this should come with the jsx- prefix.

[ljharb]

Ah yes, that's true, and it should catch React.createElement uses as well.

I think dom-elements-no-danger-with-children or dom-elements-no-inner-html-with-children is fine.

[lencioni]

Thinking about #712, which I think might be named dom-elements-no-inner-html, I think dom-elements-no-danger-with-children might be better actually. Plus it makes me laugh.