Eslint-plugin-react: Rule proposal: prevent some DOM elements from having children or dangerouslySetInnerHTML

[lencioni]

There are some HTML elements that are normally self-closing (e.g. img, br, hr). If you try to give these children, React will give you a warning like

Invariant Violation: img is a void element tag and must neither have children nor use dangerouslySetInnerHTML.

It would be nice to have a rule enforcing this.

Bad:

<img src="path/to/img.jpg">
  Children
</img>

<img src="path/to/img.jpg" dangerouslySetInnerHTML={{ __html: 'HTML' }} />

<img src="path/to/img.jpg" children="Children" />

Good:

<img src="path/to/img.jpg" />

The full list that React uses can be found:

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

Which comes out as:

• area
• base
• br
• col
• embed
• hr
• img
• input
• keygen
• link
• menuitem
• meta
• param
• source
• track
• wbr

[ljharb]

This seems like an excellent idea, and one that's mostly enforceable with both jsx and React.createElement (it wouldn't be enforceable with spreaded props that contain a "children" key, but I think that's OK)

[lencioni]

Yeah, I think the 99% solution is great.

[lencioni]

What should this be called? void-element-tag-no-children?

[ljharb]

Since it's just for DOM elements, what about self-closing-dom-elements-no-children? "void element" isn't a term I'm familiar with, but "self-closing" is.

[lencioni]

I thought about that, but I think self-closing may refer to elements that are also able to accept children but happen to be rendered without children, such as div. I'm not totally sold on the void naming either, but it is the language used by React and the HTML spec: https://www.w3.org/TR/html-markup/syntax.html#syntax-elements

[ljharb]

In that case, maybe void-dom-elements-no-children? "tag" isn't appropriate if it's not just jsx, and i like including "dom" to point out that it's not for custom components.

[lencioni]

That works for me!

[kepi0809]

why is wbr on this list??

[ljharb]

@kepi0809 because <wbr /> is a self-closing element?

[kepi0809]

@kepi0809 because <wbr /> is a self-closing element?

@ljharb https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr it's not?

[ljharb]

@kepi0809 HTML5 permits self-closing elements to omit the closing slash; anything is a self-closing element if it can not contain children. See "Tag omission" on that page.