Material-UI: the value provided `undefined` is invalid

Question

I use Tabs, Tab and Appbar from material ui 1.0.0-beta.35 to display some tabs with labels imported from an object with data.

I get this error from material-ui:

Warning: Material-UI: the value provided `undefined` is invalid

I could reproduce it in this codesandbox (material ui 1.0.0-beta.38 but same error):

code example

Click "Console" to see the errors. I have followed the guidelines as far as I can see? :

https://material-ui-next.com/api/tabs/

https://material-ui-next.com/api/tab/

https://material-ui-next.com/api/app-bar/

On the real project this causes the appbar to not function when I click the tabs. It did work for some time, but then this error happened out of the blue, but I haven't been able to find what is causing the error.

Answer 1

With the Tabs component, you're responsible for maintaining the selected tab in your state, that's the undefined value prop it is complaining about. So you'll need to do something like this:

class TabsContainer extends Component {
  state = {
    selectedTab: 'shop-setup'
  }

  handleTabClick = (event, value) => {
    this.setState({selectedTab: value});
  }
  ..
      <TabsContent
          tabs={tabData}
          selectedTab={this.state.selectedTab}
          onChange={this.handleTabClick}
      />
  ..
}

and then pass selectedTab as value to Tabs:

const TabsContent = ({ tabs, selectedTab, onChange }) => {
  ..
        <Tabs value={selectedTab} onChange={onChange}>
  ..
};

Initialization is easier if you don't provide value's for each Tab so the selectedTab simply becomes an index.

You're also going to want to lift the RenderTab definition out of TabContent, as it is created fresh on each render now, which will cause unnecessary remounting and possible loss of state.

UPDATE: here's a working sandbox