[Tabs] Warning: Material-UI: the value provided 0 is invalid when using dynamic data

[pangz1]

version: 1.0.0-beta.11

When I am using a static data to render Tabs, it works fine,
but if the data was fetched from a remote server, I got this warning

Warning: Material-UI: the value provided `0` is invalid
__stack_frame_overlay_proxy_console__ | @ | proxyConsole.js:56
-- | -- | --
  | warning | @ | browser.js:49
  | Tabs._this.getTabsMeta | @ | Tabs.js:228
  | updateIndicatorState | @ | Tabs.js:307
  | componentDidMount | @ | Tabs.js:280
  | (anonymous) | @ | ReactCompositeComponent.js:264
  | measureLifeCyclePerf | @ | ReactCompositeComponent.js:75
  | (anonymous) | @ | ReactCompositeComponent.js:263
  | notifyAll | @ | CallbackQueue.js:76
  | close | @ | ReactReconcileTransaction.js:80
  | closeAll | @ | Transaction.js:209
  | perform | @ | Transaction.js:156
  | perform | @ | Transaction.js:143
  | perform | @ | ReactUpdates.js:89
  | flushBatchedUpdates | @ | ReactUpdates.js:172
  | closeAll | @ | Transaction.js:209
  | perform | @ | Transaction.js:156
  | batchedUpdates | @ | ReactDefaultBatchingStrategy.js:62
  | batchedUpdates | @ | ReactUpdates.js:97
  | _renderNewRootComponent | @ | ReactMount.js:319
  | _renderSubtreeIntoContainer | @ | ReactMount.js:401
  | render | @ | ReactMount.js:422
  | ./src/index.js | @ | index.js:14
  | __webpack_require__ | @ | bootstrap 1bc9934…:669
  | fn | @ | bootstrap 1bc9934…:87
  | 0 | @ | index.jsx:10
  | __webpack_require__ | @ | bootstrap 1bc9934…:669
  | (anonymous) | @ | bootstrap 1bc9934…:715
  | (anonymous) | @ | bundle.js:719

besides, the selected tab was not behaved correctly:
the text was colored but there is no active indicator below the text.

here is my code

function MyTabs (props) {

  return (
    <Tabs
      value={props.value}
      onChange={props.handleChange}
      indicatorColor="primary"
      textColor="primary"
      scrollable
      scrollButtons="auto"
    >
      {
        props.items.map(item => <Tab label={item.brand} key={item.brand} value={item.brand} onClick={props.onClick} />)
      }
    </Tabs>
  )
}

export default class Main extends React.Component {
  constructor (props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.state = {
      currentTabIndex: 0,
      tabData: []
    }
  }

  render () {
    return (
      <MyTabs value={this.state.currentTabIndex} items={this.state.tabData} 
        handleChange={this.handleChange} />
    )
  }

  componentWillMount () {
    fetchTabsData()
      .then(data => {
        this.setState({
          tabData: data
        })
      })
  }
}

[felansu]

Same error in using material-ui: v1.0.0-beta.34

[goodbomb]

Likewise. Seeing this in beta.34

[oliviertassinari]

@felansu @goodbomb do you have a reproduction example?

[goodbomb]

@oliviertassinari turns out mine was a bug on my end. My application was momentarily redirecting to different URL, which resulted in the wrong value being applied to the state for a moment, resulting in this error being displayed. I've fixed it now. Thanks!

[Luchnik]

@goodbomb I have same problem when app momentarily redirects to another page. Thus error from material tabs occurs. How did you fix that. Did you use some sort of default value?

[Daniela0106]

Hi. Does anyone know how to fix this?
I'm getting this error currently, on MUI version 3.9.1

I had assumed that "[Tabs] Support empty children " that was merged to Material UI on 2017 would've fixed it... ?

[oliviertassinari]

@Daniela0106 Do you have a reproduction example? A codesandbox would be perfect :)

[Daniela0106]

Thanks @oliviertassinari :) 👍 Here: https://codesandbox.io/s/7wq99vxrkx (the other was the embeded one)

[Daniela0106]

So, turns out it was just const value = '/theatre'; had some unnecessary brackets around it... So, my bad @oliviertassinari :) 👍 No more error logs

[oliviertassinari]

@Daniela0106 Great :)

[SleighJ]

I'm having this issue - doesn't break the code, but the component doesn't seem very psyched to see a custom value

[oliviertassinari]

@SleighJ Do you have a reproduction?

[DuudeXX8]

Actually this happen when I don't provide a parameter event value for onChange function.
If I remove event parameter from code below the error will be shown.

const handleChange = (event, newValue) => setValue(newValue);
<AntTabs value={value} onChange={handleChange} aria-label="ant example">

[thalysonalexr]

I have a same problem, and fix this set the state of component with initializing 0:

const [value, setValue] = useState<number>(0);

[j-lee8]

Is there a recommended way to display tabs conditionally without receiving the "The value provided to the Tabs component is invalid. None of the Tabs' children match with car. You can provide one of the following values: sold, available." message? E.g. if I want to display a tab only at <= md breakpoint but on lg devices it says it's invalid but I am using useMediaQuery . I'm using:

!matches && <Tab label="Car" key="car" value="car" />

There's also a flicker on the useMediaQuery matches before it determines the correct size of the viewport. I'm guessing it's a hydration issue, but even using noSsr: true didn't solve it for me.

[oliviertassinari]

@JavaJamie Do you have a reproduction for this using the latest version? The way the warning is currently isn't ideal but it's very often reliable.

[j-lee8]

@oliviertassinari try this:

https://codesandbox.io/s/material-ui-match-g2x5c?file=/src/App.js

1. Click "Flicker" (page will reload)
2. The flicker button will quickly show "Previous" before "Flicker".

This is as minimal as it gets, but we have various tabs views that are shown at different breakpoints and these flickers make it look very janky.

[oliviertassinari]

@JavaJamie Oh ok, then the tab warning is correct. Regarding the flickering, feel free to work on the issue: #21142. We simply need to swap useEffect with useLayoutEffect when possible.