Bug: components that map children (eg Breadcrumb) break when using a fragment

[dbowling]

Steps to reproduce

Steps to reproduce

Introduce a fragment into the Breadcrumb.

A minimal, contrived example:

    <Breadcrumb aria-label="">
      <>
        <BreadcrumbLink href="/foo">
          Item One
        </BreadcrumbLink>
        <BreadcrumbItem>
          Item Two
        </BreadcrumbItem>
      </>
    </Breadcrumb>

Use case

This was encountered when trying to conditionally display breadcrumbs, where one branch of the operation required a fragment to wrap two breadcrumbs.

Possible workarounds

Working around this issue now by wrapping both individual breadcrumb items in their own conditional so there is never a fragment.

Expected Behavior

Renders two <li> items.

Actual Behavior

Renders a single <li> with two items inside. This has the effect of removing the separator between the breadcrumbs.

<ol>
  <li class="Breadcrumb__Item">
    <a class="Link Breadcrumb__Link" href="/foo">Item One</a>
    <span class="Breadcrumb__Item">Item Two</span>
  </li>
</ol>

Version

4.7.0

What browsers are you experiencing the problem on?

Firefox

Relevant log output

No response

Anything else we should know?

Additional information

Jason did some initial looking and found that this could impact several components, and is related to reactjs/rfcs#61