How to create a MDX Tab component for Astro with React?

[coral oar]

Astro returns children as an unreadable object. I have tried many ways to create a tab component, but I failed.

[glad stream]

Please show what you've tried so far. Some short code samples.

[coral oar]

Here is the repo that I am testing: https://github.com/tfsomrat/astro-tab-test/
The Tabs and Tab component is here: https://github.com/tfsomrat/astro-tab-test/tree/main/src/layouts/shortcodes
And I call them here: https://raw.githubusercontent.com/tfsomrat/astro-tab-test/main/src/content/pages/elements.mdx

This is the main function:

function Tabs({ children }) {
  let tabArray;
  if (Array.isArray(children)) {
    tabArray = children;
    // console.log(tabArray);
  }
  console.log(children);
  return <div className="relative">tab</div>;
}

export default Tabs;

When I am logging the children, I get an Array, but the problem is, the array replaced with an unreadable object within a second.

First output (that I need) :

[
  {
    'astro:jsx': true,
    type: [Function: Tab],
    props: { name: 'Tab 1', children: [Object] },
    [Symbol(astro:renderer)]: 'astro:jsx'
  },
  {
    'astro:jsx': true,
    type: [Function: Tab],
    props: { name: 'Tab 2', children: [Object] },
    [Symbol(astro:renderer)]: 'astro:jsx'
  },
  {
    'astro:jsx': true,
    type: [Function: Tab],
    props: { name: 'Tab 3', children: [Object] },
    [Symbol(astro:renderer)]: 'astro:jsx'
  }
]

Second Output (that replaced the first output automatically) :

{
  '$$typeof': Symbol(react.element),
  type: [Function: StaticHtml] {
    shouldComponentUpdate: [Function (anonymous)]
  },
  key: null,
  ref: null,
  props: {
    value: [String (SlotString): '<li class="tab-item my-0 hidden"><p>I am Tab 1</p></li><li class="tab-item my-0 hidden"><p>I am Tab 2</p></li><li class="tab-item my-0 hidden"><p>I am Tab 3</p></li>'] [HTMLString] {
      instructions: null,
      [Symbol(astro:slot-string)]: true
    }
  },
  _owner: null,
  _store: {}
}

[nimble lion]

Maybe some inspirations here?
https://github.com/JulianCataldo/web-garden/tree/develop/components/Tabs

It's JS free

[coral oar]

So, it's not using any children thing, it needs to provide two separate components, one for tab-head, and one for tab-body. that is complicated for the end users.

I want to call the tab like this:

<Tabs>
<Tab name="Tab 1">
I am Tab 1
</Tab>

<Tab name="Tab 2">
I am Tab 2
</Tab>
</Tabs>