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

Created on 1 Oct 2017 · 18Comments · Source: mui-org/material-ui

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

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

```jsx
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
        })
      })
  }
}

Tabs enhancement

Source

pangz1

Most helpful comment

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

felansu on 28 Feb 2018

👍2

All 18 comments

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

felansu on 28 Feb 2018

👍2

Likewise. Seeing this in beta.34

goodbomb on 2 Mar 2018

@felansu @goodbomb do you have a reproduction example?

oliviertassinari on 3 Mar 2018

@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!

goodbomb on 3 Mar 2018

@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?

Luchnik on 10 Jan 2019

tempsnip
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... ?

Daniela0106 on 30 Jan 2019

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

oliviertassinari on 30 Jan 2019

👍1

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

Daniela0106 on 30 Jan 2019

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

Daniela0106 on 30 Jan 2019

@Daniela0106 Great :)

oliviertassinari on 30 Jan 2019

❤1

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

SleighJ on 6 Feb 2020

@SleighJ Do you have a reproduction?

oliviertassinari on 6 Feb 2020

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">

DuudeXX8 on 12 Jun 2020

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

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

thalysonalexr on 27 Aug 2020

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 withcar. 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.

JavaJamie on 13 Oct 2020

@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.

oliviertassinari on 13 Oct 2020

@oliviertassinari try this:

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

Click "Flicker" (page will reload)
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.

JavaJamie on 15 Oct 2020

@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.

oliviertassinari on 16 Oct 2020

Was this page helpful?

0 / 5 - 0 ratings