Material-ui: react 16 React.Fragment Tabs bug

[gwmaster]

React.Fragment on Tabs don't work
if i return react 16 React.Fragment array of Tab to Tabs they shown but don't work :(

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Current Behavior

Steps to Reproduce (for bugs)

1.

 <Tabs
                        value={value}
                        onChange={this.handleChange}
                        scrollable
                        scrollButtons="on"
                        indicatorColor="primary"
                        textColor="primary"
                    >
                        <MyTabs />
                    </Tabs>

2.
MyTabs.js

export default class  extends Component{
    render(){
            return(
                <React.Fragment>
                    <Tab key="0" label="Live" icon={<LiveTv />} />
                    <Tab key="1" label="Info" icon={<Assessment />} />
                </React.Fragment>
            )
    }
}

3.
4.

Context

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | |
| React | |
| browser | |
| etc | |

[oliviertassinari]

Please provide a full reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template _may_ be a good starting point. Thank you!

[oliviertassinari]

Ok, here is a reproduction: https://codesandbox.io/s/lr2255ov29. The issue comes from the fact that the Tabs is iterating through its child elements to clone them. The issue isn't scoped to the Tabs component. Supporting this pattern will require complexifying the logic on Material-UI side, I don't think it worth it.

[ViolentCrumble]

You can get around this by just returning an array without the fragment.

instead of

return (
    <React.Fragment>
        <Tab key="0" label="Live" icon={<LiveTv />} />
        <Tab key="1" label="Info" icon={<Assessment />} />
    </React.Fragment>
)

you can do

return [
    <Tab key="0" label="Live" icon={<LiveTv />} />,
    <Tab key="1" label="Info" icon={<Assessment />} />,
]

ran into this issue while trying to build a GridList dynamically
hope this helps!