[Tabs][BottomNavigation] Use value over index property

docs/src/pages/component-demos/bottom-navigation/LabelBottomNavigation.js

@@ -17,7 +17,7 @@ const styles = {
 
 class LabelBottomNavigation extends Component {
   state = {
-    value: 0,
+    value: 'recents',
   };
 
   handleChange = (event, value) => {
@@ -29,14 +29,12 @@ class LabelBottomNavigation extends Component {
     const { value } = this.state;
 
     return (
-      <div className={classes.root}>
-        <BottomNavigation value={value} onChange={this.handleChange}>
-          <BottomNavigationButton label="Recents" icon={<RestoreIcon />} />
-          <BottomNavigationButton label="Favorites" icon={<FavoriteIcon />} />
-          <BottomNavigationButton label="Nearby" icon={<LocationOnIcon />} />
-          <BottomNavigationButton label="Folder" icon={<FolderIcon />} />
-        </BottomNavigation>
-      </div>
+      <BottomNavigation value={value} onChange={this.handleChange} className={classes.root}>
+        <BottomNavigationButton label="Recents" value="recents" icon={<RestoreIcon />} />
+        <BottomNavigationButton label="Favorites" value="favorites" icon={<FavoriteIcon />} />
+        <BottomNavigationButton label="Nearby" value="nearby" icon={<LocationOnIcon />} />
+        <BottomNavigationButton label="Folder" value="folder" icon={<FolderIcon />} />
+      </BottomNavigation>
     );
   }
 }

docs/src/pages/component-demos/bottom-navigation/SimpleBottomNavigation.js

@@ -28,13 +28,16 @@ class SimpleBottomNavigation extends Component {
     const { value } = this.state;
 
     return (
-      <div className={classes.root}>
-        <BottomNavigation value={value} onChange={this.handleChange} showLabels>
-          <BottomNavigationButton label="Recents" icon={<RestoreIcon />} />
-          <BottomNavigationButton label="Favorites" icon={<FavoriteIcon />} />
-          <BottomNavigationButton label="Nearby" icon={<LocationOnIcon />} />
-        </BottomNavigation>
-      </div>
+      <BottomNavigation
+        value={value}
+        onChange={this.handleChange}
+        showLabels
+        className={classes.root}
+      >
+        <BottomNavigationButton label="Recents" icon={<RestoreIcon />} />
+        <BottomNavigationButton label="Favorites" icon={<FavoriteIcon />} />
+        <BottomNavigationButton label="Nearby" icon={<LocationOnIcon />} />
+      </BottomNavigation>
     );
   }
 }

docs/src/pages/component-demos/tabs/BasicTabs.js

@@ -7,10 +7,13 @@ import { withStyles } from 'material-ui/styles';
 import AppBar from 'material-ui/AppBar';
 import Tabs, { Tab } from 'material-ui/Tabs';
 
-const TabContainer = props =>
-  <div style={{ padding: 20 }}>
-    {props.children}
-  </div>;
+function TabContainer(props) {
+  return (
+    <div style={{ padding: 20 }}>
+      {props.children}
+    </div>
+  );
+}
 
 TabContainer.propTypes = {
   children: PropTypes.node.isRequired,
@@ -26,34 +29,35 @@ const styles = theme => ({
 
 class BasicTabs extends Component {
   state = {
-    index: 0,
+    value: 0,
   };
 
-  handleChange = (event, index) => {
-    this.setState({ index });
+  handleChange = (event, value) => {
+    this.setState({ value });
   };
 
   render() {
-    const classes = this.props.classes;
+    const { classes } = this.props;
+    const { value } = this.state;
 
     return (
       <div className={classes.root}>
         <AppBar position="static">
-          <Tabs index={this.state.index} onChange={this.handleChange}>
+          <Tabs value={value} onChange={this.handleChange}>
             <Tab label="Item One" />
             <Tab label="Item Two" />
             <Tab label="Item Three" />
           </Tabs>
         </AppBar>
-        {this.state.index === 0 &&
+        {value === 0 &&
           <TabContainer>
             {'Item One'}
           </TabContainer>}
-        {this.state.index === 1 &&
+        {value === 1 &&
           <TabContainer>
             {'Item Two'}
           </TabContainer>}
-        {this.state.index === 2 &&
+        {value === 2 &&
           <TabContainer>
             {'Item Three'}
           </TabContainer>}

docs/src/pages/component-demos/tabs/BasicTabsWrappedLabel.js

@@ -7,10 +7,13 @@ import { withStyles } from 'material-ui/styles';
 import AppBar from 'material-ui/AppBar';
 import Tabs, { Tab } from 'material-ui/Tabs';
 
-const TabContainer = props =>
-  <div style={{ padding: 20 }}>
-    {props.children}
-  </div>;
+function TabContainer(props) {
+  return (
+    <div style={{ padding: 20 }}>
+      {props.children}
+    </div>
+  );
+}
 
 TabContainer.propTypes = {
   children: PropTypes.node.isRequired,
@@ -26,34 +29,35 @@ const styles = theme => ({
 
 class BasicTabsWrappedLabel extends Component {
   state = {
-    index: 0,
+    value: 'one',
   };
 
-  handleChange = (event, index) => {
-    this.setState({ index });
+  handleChange = (event, value) => {
+    this.setState({ value });
   };
 
   render() {
-    const classes = this.props.classes;
+    const { classes } = this.props;
+    const { value } = this.state;
 
     return (
       <div className={classes.root}>
         <AppBar position="static">
-          <Tabs index={this.state.index} onChange={this.handleChange}>
-            <Tab label="New Arrivals in the Longest Text of Nonfiction" />
-            <Tab label="Item Two" />
-            <Tab label="Item Three" />
+          <Tabs value={value} onChange={this.handleChange}>
+            <Tab value="one" label="New Arrivals in the Longest Text of Nonfiction" />
+            <Tab value="two" label="Item Two" />
+            <Tab value="three" label="Item Three" />
           </Tabs>
         </AppBar>
-        {this.state.index === 0 &&
+        {value === 'one' &&
           <TabContainer>
             {'Item One'}
           </TabContainer>}
-        {this.state.index === 1 &&
+        {value === 'two' &&
           <TabContainer>
             {'Item Two'}
           </TabContainer>}
-        {this.state.index === 2 &&
+        {value === 'three' &&
           <TabContainer>
             {'Item Three'}
           </TabContainer>}

docs/src/pages/component-demos/tabs/CenteredTabs.js

@@ -15,20 +15,20 @@ const styles = theme => ({
 
 class CenteredTabs extends Component {
   state = {
-    index: 0,
+    value: 0,
   };
 
-  handleChange = (event, index) => {
-    this.setState({ index });
+  handleChange = (event, value) => {
+    this.setState({ value });
   };
 
   render() {
-    const classes = this.props.classes;
+    const { classes } = this.props;
 
     return (
       <Paper className={classes.root}>
         <Tabs
-          index={this.state.index}
+          value={this.state.value}
           onChange={this.handleChange}
           indicatorColor="primary"
           textColor="primary"

docs/src/pages/component-demos/tabs/DisabledTabs.js

@@ -7,18 +7,18 @@ import Tabs, { Tab } from 'material-ui/Tabs';
 
 class DisabledTabs extends Component {
   state = {
-    index: 0,
+    value: 0,
   };
 
-  handleChange = (event, index) => {
-    this.setState({ index });
+  handleChange = (event, value) => {
+    this.setState({ value });
   };
 
   render() {
     return (
       <Paper>
         <Tabs
-          index={this.state.index}
+          value={this.state.value}
           indicatorColor="primary"
           textColor="primary"
           onChange={this.handleChange}

docs/src/pages/component-demos/tabs/FullWidthTabs.js

@@ -8,10 +8,13 @@ import SwipeableViews from 'react-swipeable-views';
 import AppBar from 'material-ui/AppBar';
 import Tabs, { Tab } from 'material-ui/Tabs';
 
-const TabContainer = props =>
-  <div style={{ padding: 24 }}>
-    {props.children}
-  </div>;
+function TabContainer(props) {
+  return (
+    <div style={{ padding: 20 }}>
+      {props.children}
+    </div>
+  );
+}
 
 TabContainer.propTypes = {
   children: PropTypes.node.isRequired,
@@ -25,25 +28,25 @@ const styles = theme => ({
 
 class FullWidthTabs extends Component {
   state = {
-    index: 0,
+    value: 0,
   };
 
-  handleChange = (event, index) => {
-    this.setState({ index });
+  handleChange = (event, value) => {
+    this.setState({ value });
   };
 
   handleChangeIndex = index => {
-    this.setState({ index });
+    this.setState({ value: index });
   };
 
   render() {
-    const classes = this.props.classes;
+    const { classes } = this.props;
 
     return (
       <div className={classes.root} style={{ width: 500 }}>
         <AppBar position="static" color="default">
           <Tabs
-            index={this.state.index}
+            value={this.state.value}
             onChange={this.handleChange}
             indicatorColor="primary"
             textColor="primary"
@@ -54,7 +57,7 @@ class FullWidthTabs extends Component {
             <Tab label="Item Three" />
           </Tabs>
         </AppBar>
-        <SwipeableViews index={this.state.index} onChangeIndex={this.handleChangeIndex}>
+        <SwipeableViews index={this.state.value} onChangeIndex={this.handleChangeIndex}>
           <TabContainer>
             {'Item One'}
           </TabContainer>

docs/src/pages/component-demos/tabs/IconLabelTabs.js

@@ -9,18 +9,18 @@ import PersonPinIcon from 'material-ui-icons/PersonPin';
 
 export default class IconLabelTabs extends Component {
   state = {
-    index: 0,
+    value: 0,
   };
 
-  handleChange = (event, index) => {
-    this.setState({ index });
+  handleChange = (event, value) => {
+    this.setState({ value });
   };
 
   render() {
     return (
       <Paper style={{ width: 500 }}>
         <Tabs
-          index={this.state.index}
+          value={this.state.value}
           onChange={this.handleChange}
           fullWidth
           indicatorColor="accent"

docs/src/pages/component-demos/tabs/IconTabs.js

@@ -9,22 +9,22 @@ import PersonPinIcon from 'material-ui-icons/PersonPin';
 
 export default class IconTabs extends Component {
   state = {
-    index: 0,
+    value: 0,
   };
 
-  handleChange = (event, index) => {
-    this.setState({ index });
+  handleChange = (event, value) => {
+    this.setState({ value });
   };
 
   render() {
     return (
       <Paper style={{ width: 500 }}>
         <Tabs
-          index={this.state.index}
+          value={this.state.value}
           onChange={this.handleChange}
+          fullWidth
           indicatorColor="primary"
           textColor="primary"
-          fullWidth
         >
           <Tab icon={<PhoneIcon />} />
           <Tab icon={<FavoriteIcon />} />