Tabs with context provider in between <Tabs> and <Tablist>

[anjalikk14]

Hi all,

I'm working on creating a drag and drop version of react tabs using react-dnd.

React dnd requires a DndProvider context to be wrapped around any draggable/droppable objects. I'm currently trying to do something like this:

function DndTabs({data}) {
  // (...Some functions that require the DndContext here...)
  return (
    <TabList>
      {Object.keys(data).map(tabId => {
        <Tab key={tabId}> tabId </Tab>
      })}
    </TabList>
  )
}

function DndContainer({data}) {
   return (
      <DndProvider> 
         <DndTabs data={data} />
      </DndProvider>
   )
}

function TabHolder() {
  return (
    <Tabs>
        <DndContainer data={data} />
        {Object.keys(data).map(tabId => {
          <TabPanel key={tabId}> tabId </TabPanel>
        })}
    </Tabs>
  )
}

This is throwing the
Warning: Failed prop type: There should be an equal number of 'Tab' and 'TabPanel' in 'UncontrolledTabs' error, even though the actual rendered HTML should have tablist and tabpanels as siblings with an equal number of Tab and TabPanel elements.

I tried following the advice in #253 (calling the react component as a function instead of letting react render it) but this causes issues with the DndContext because functions that require the context to exist need to render after the Context itself renders.

Is there any structure that I can use that will make this work, following the additional constraint that the Provider for the Dnd Context needs to appear/render before the actual Tabs?