Bug: dom.br can't accept empty Fragments as children

Posted 3 months ago

Bug: dom.br can't accept empty Fragments as children #22530

When rendering a dom.br(), React will fail if you use a Fragment which has no children.

React version: 17.0.1

Steps To Reproduce

  1. Using the React UMD distribution in a browser
  2. ReactDOMServer.renderToStaticMarkup(ReactDOMFactories.br({}, React.createElement(React.Fragment, {}))) throws

The current behavior

React fails to render, even though the dom.br in fact has no children

The expected behavior

React should at least be able to see through arrays and Fragments when performing this check. Ideally even custom components that ultimately do not render any DOM would also be tolerated.

You may ask what the purpose of this is. In short, we are mapping from some HTML to a React render, with some translations. For all elements, we map the children into a Fragment. If there are no children in the source HTML, then the Fragment is empty. In this case we therefore fail to render even though the input is valid HTML. We can simply spread the child array directly, but it simplifies things a bit if we can simply use Fragments to represent the children as then the caller does not need to know about these details.

Created 2 months ago

FWIW, <br><></></br> doesn't seem to work on the client either:

Error: br is a void element tag and must neither have children nor use dangerouslySetInnerHTML.


Based on the message, i'd guess that's intended behavior -- looks like an empty Fragment isn't really the same as no children.