extend Mantine Accordion Item

Question

Mantine accordion specifies that its content should be only of type Accordion.Item (or, AccordionItem) - see the documentation for the children props. This means that even functions that actually return AccordionItem will not be listed.

So, this simple component will display only AccordionItem(s) that were instantiated inline, yet, not one returned from another function (see MyAccordionItem in this simple app).

The code:

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Accordion } from '@mantine/core';

const MyAccordionItem = ({children, label}) =>
  <Accordion.Item label={label}>
    {children}
  </Accordion.Item>;

function App() {
  return (
    <div style={{width: 200}}>
      <div>pre</div>
      <Accordion>
        <Accordion.Item label="section0">
          <div>sec0.item1</div>
          <div>sec0.item2</div>
          <div>sec0.item3</div>
        </Accordion.Item>


        {/* Section 1 is not displayed because it is no of type Accordion.Item 
        <MyAccordionItem label="section 1">
          <div>sec1.item1</div>
          <div>sec1.item2</div>
          <div>sec1.item3</div>
        </MyAccordionItem>

        <Accordion.Item label="section2">
          <div>sec2.item1</div>
          <div>sec2.item2</div>
          <div>sec2.item3</div>
        </Accordion.Item>
      </Accordion>
      <div>post</div>
    </div>
  );
}

render(<App />, document.getElementById('root'));

The reason is the filter function defined here, and used by the accordion here.

My questions are:

1. Do you know of any work around that helps assigning the same type (or, appearing to be an Accordion.Item when defining your own component?
2. On a larger scale, What do you think is the right approach from the library's perspective (in this case mantine), i.e. should it suffice in checking that the returned type is An accordion item?

Answer 1

I came across this same issue and found this GitHub issue in the Mantine repository with more information about creating child components that return AccordionItems.

rtivital (Mantine's creator) states:

Yes, currently that is not supported, it will require breaking changes, so Accordion and other similar components will be Migrated to context with next major release (5.0)

As to a work around, I haven't found anything yet other than creating a custom component for the content inside the AccordionItem and then wrapping that with the Mantine AccordionItem component inline via mapping or explicitly listing them.