React component structure

react-breacrumb-example.jsx

<Breadcrumbs>
    <Breadcrumb text="Home" href="/" />
    <Breadcrumb text="Child" href="/child" />
    <Breadcrumb text="Grandchild" href="/child/grandchild" />
</Breadcrumbs>

// or

<Breadcrumbs items={[
    {
        text: "Home",
        href: "/"
    },
    {
        text: "Child",
        href: "/child"
    },
    {
        text: "Grandchild",
        href: "/child/grandchild"
    }
]} />

const Breadcrumb = ({ text = 'PLACEHOLDER', href = '#' }) => /* whatever you have now */

const Breadcrumbs = ({ children = Breadcrumb, items }) => <whatever>items.map(children)</whatever>

This can be used like:

<Breadcrumbs items={data} />

Or, if you don't like the default guts of it:

<Breadcrumbs items={data}>
  ({ text, href }) => /* Whatever JSX you want, but different from default. */
</Breadcrumbs>

Not limited to the same data structure (still breadcrumbs, but using different kind of data?).

Not sure how the community feels about this though. Thoughts?