TabList and TabPanels do not comply with using lists.map to loop over Tab and TabPanel

[marmid74]

Describe the bug

The Tabs component with TabList or TabPanels in combination with a .map to render a set of Tab or a set of TabPanel creates a forwardRef warning in devTools.
Warning: Failed prop type: Invalid prop children supplied to ForwardRef(TabLists).
Warning: Failed prop type: Invalid prop children supplied to ForwardRef(TabPanels).

To use a map over a list of objects is convenient when you have a long list, or the length is dynamic.

Steps to reproduce the bug
code example

const items = [ {object A}, {object B}, {object C}]

<Tabs>
  <TabList>
     {items.map(item => (
         <Tab>{item.name}</Tab>
     )}
  </TabList>
  <TabPanels>
    {items.map(item=>(
      <TabPanel>{item.value}</TabPanel>
    )}
  </TabPanels>
</Tabs>

Expected behavior
the same as if not using a map

const items = [ {object A}, {object B}, {object C}]

<Tabs>
  <TabList>
     <Tab>{items[0].name}</Tab>
     <Tab>{items[1].name}</Tab>
     <Tab>{items[2].name}</Tab>
  </TabList>
  <TabPanels>
     <TabPanel>{items[0].value}</TabPanel>
     <TabPanel>{items[1].value}</TabPanel>
     <TabPanel>{items[2].value}</TabPanel>
  </TabPanels>
</Tabs>

[mimarz]

Hi @marmid74 !

I was not able to replicate this bug using the example you provided...

export const tabsCollection = () => {
  const [activeTab, setActiveTab] = useState(1)

  const handleChange = (index) => {
    setActiveTab(index)
  }

  const items = [
    { name: 'Tab 1', value: 'Tab 1 body as plain text' },
    { name: 'Tab 2', value: <Typography>Tab 2 body as typography</Typography> },
    { name: 'Tab 3', value: <div>Tab 3 as div</div> },
  ]

  return (
    <Wrapper>
      <Typography variant="h1">
        Tab with panels rendered from collection
      </Typography>
      <Tabs activeTab={activeTab} onChange={handleChange}>
        <TabList>
          {items.map(({ name }) => (
            <Tab key={name}>{name}</Tab>
          ))}
        </TabList>
        <TabPanels>
          {items.map(({ name, value }) => (
            <TabPanel key={name}>{value}</TabPanel>
          ))}
        </TabPanels>
      </Tabs>
    </Wrapper>
  )
}

Although if I wrapped the Tab or TabPanel with styled-components I was able to reproduced this bug. 👨‍🎨

const StyledTab = styled(Tab)`
  background: pink;
`

const StyledTabPanel = styled(TabPanel)`
  background: peachpuff;
`
export const tabsCollection = () => {
  const [activeTab, setActiveTab] = useState(1)

  const handleChange = (index) => {
    setActiveTab(index)
  }

  const items = [
    { name: 'Tab 1', value: 'Tab 1 body as plain text' },
    { name: 'Tab 2', value: <Typography>Tab 2 body as typography</Typography> },
    { name: 'Tab 3', value: <div>Tab 3 as div</div> },
  ]

  return (
    <Wrapper>
      <Typography variant="h1">
        Tab with panels rendered from collection
      </Typography>
      <Tabs activeTab={activeTab} onChange={handleChange}>
        <TabList>
          {items.map(({ name }) => (
            <StyledTab key={name}>{name}</StyledTab>
          ))}
        </TabList>
        <TabPanels>
          {items.map(({ name, value }) => (
            <StyledTabPanel key={name}>{value}</StyledTabPanel>
          ))}
        </TabPanels>
      </Tabs>
    </Wrapper>
  )
}

Are you also using styled-components? 🤔

[marmid74]

Yes, we use styled components.