Material UI: Wrapping Tab children in a div element

0
votes

is there a way to have a material ui tabs component's tab children wrapped in div's?

<Tabs
    value={value}
    indicatorColor="primary"
    textColor="primary"
    onChange={handleChange}
  >
  <div>
    <Tab label="x" />
 </div>
 <div>
    <Tab label="y" />
</div>
  </Tabs>

Currently I am getting an error that states "The value provided to the tabs component is invalid, None of the tabs' children match with x". removing the divs solves this problem but I need these tabs wrapped in a div so I can have a handle to drag the tab. Any advice is much appreciated as I haven't seen a way to do this so successfully so far.

1
javascripthtmlreactjsmaterial-ui

1 Answers

0
votes

The Tabs component receives only Tab components as children. You can't wrap the Tab in a div. If want to drag and drop the Tab component you can define the property draggable="true" directly:

<Tabs
    value={value}
    indicatorColor="primary"
    textColor="primary"
    onChange={handleChange}
  >
    <Tab label="x" draggable="true"/>
    <Tab label="y" draggable="true"/>
  </Tabs>