array of children in jsx component

[denisbabineau]

The following mdx produces invalid output. This is an overly simplified case of my original issue dealing with a custom react component taking in an array of children which works properly outside of mdx.

This can be reproduced in https://mdxjs.com/playground/

<div>
    <div>
    One
    </div>

    <div>
    Two
    </div>

    <div>
    Three
    </div>
</div>

Expected behaviour

Render a div with 3 nested divs

Actual behaviour

Renders a div with 1 nested div and the unformatted jsx content of the last two items

[wooorm]

The problem here is the combination of blank lines (between the nested divs) and indentation.

A blank line breaks JSX, so <div> <div> One </div> is JSX, but after that we’re back in Markdown. Then there’s four spaces: that starts a code block.

[denisbabineau]

When you explain it like that it makes complete sense, thanks for the quick response!

I'll close this as a non-issue however in going back to the documentation I couldn't find a reference to this behavior so there might be room for improvements there (or I'm still overlooking it!)

Thanks!

[wooorm]

If you have a place where that should go, where you expected it, we'd appreciate a PR!