false warning about "'Tab' outside 'TabList'" when using Immutable seq

[kenan2002]

import React from 'react';
import { OrderedMap } from 'immutable';
import { Tabs, Tab, TabList, TabPanel } from 'react-tabs';

const tabData = OrderedMap({
  one: '1',
  two: '2',
  three: '3',
});

export default function Test() {
  return <div>
    <Tabs>
      <TabList>
        {
          // This line triggers `Failed prop type: Found a 'Tab' component outside of the 'TabList' component. 'Tab' components have to be inside the 'TabList' component.`
          tabData.keySeq().map(key => <Tab key={key}>{key}</Tab>)
          // If change to use toArray() or toList(), the warning disappears.
          // tabData.keySeq().toArray().map(key => <Tab key={key}>{key}</Tab>) // no warning
          // tabData.keySeq().toList().map(key => <Tab key={key}>{key}</Tab>)  // no warning
        }
      </TabList>

      {
        tabData.entrySeq().map(([key, value]) => <TabPanel key={key}>{value}</TabPanel>)
      }
    </Tabs>
  </div>;
}

[danez]

That is not react-tabs you are importing?

[kenan2002]

That is not react-tabs you are importing?

I'm sorry. We re-exported react-tabs with custom styles. I'll update my issue.

[danez]

I think it is beacuse seqKey().map() returns not an array but an immutable data structure, and the propTypes check seems to not account for this. I will check this.

[fnhipster]

For what is worth, I had a similar issue wrapping the TabList around a custom component. I fixed my issue by adding tabsRoles

i.e.:

const TabList = ({ ...props }) => (
    <Scrollable>
        <_TabList {...props} />
    </Scrollable>
)
TabList.tabsRole = 'TabList'