Any reason why the root element has to be a <div>?

[domharrington]

I'm refactoring some of our code to use this module, instead of dangerouslySetInnerHtml using marked. Marked appears to have a root element of a <p> tag, this module has a <div> that everything gets wrapped in.

This is causing some issues in our tests because previously we were inserting markdown content inside of a <p> tag. A <p> inside of a <p> is a valid descendant. A <div> inside of a <p> results in this react error:

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.

Would you be open to accepting a pr which makes the root tag customisable?

[domharrington]

I managed to work around this by passing in the following to remarkReactComponents:

remark()
  .use(react, {
    remarkReactComponents: {
      div: function(props) {
        return React.createElement(React.Fragment, props);
      },
    },
  });

This seems to do the trick, and I'm not sure whenever else a <div> would be constructed from markdown?

[davidtheclark]

Hi @domharrington.

Hm, <p> elements are also not supposed to be nested within <p> elements. I guess React doesn't warn against that even though the HTML validator does.

I'd be open to a PR that uses Fragment instead of div if Fragment is available (don't want to break things for React <16). That seems like the right approach 👍