import React, { Component } from 'react'
import AppBar from 'material-ui/AppBar'
import Drawer from 'material-ui/Drawer'
import SideBarItem from './SideBarItem'
import { List, makeSelectable } from 'material-ui/List'

/*
  Add you nav links here..
    isExact: if true it will be an exact path
    linkTo: the path you want to go
    text: title of the nav item
*/

const links = [
  { isExact: true, linkTo: '/', text: 'Home' },
  { isExact: false, linkTo: '/logos', text: 'Logos' },
  { isExact: false, linkTo: '/posters', text: 'Posters' },
  { isExact: false, linkTo: '/letterhead', text: 'Letterhead' },
  { isExact: false, linkTo: '/share-a-story', text: 'Share a Story' },
  {
    isExact: false,
    linkTo: '/service-request-form',
    text: 'Service Request Form'
  },
  { isExact: false, linkTo: '/tutorial', text: 'Tutorial' }
]
let SelectableList = makeSelectable(List)

function wrapState (ComposedComponent) {
  return class SelectableList extends Component {
    componentWillMount () {
      this.setState({
        selectedIndex: this.props.defaultValue
      })
    }

    handleRequestChange = (event, index) => {
      this.setState({
        selectedIndex: index
      })
    }

    render () {
      return (
        <ComposedComponent
          value={this.state.selectedIndex}
          onChange={this.handleRequestChange}
        >
          {this.props.children}
        </ComposedComponent>
      )
    }
  }
}
SelectableList = wrapState(SelectableList)
class SideNav extends Component {
  constructor (props) {
    super(props)
    this.state = { open: false }
  }

  handleClose = () => this.setState({ open: false })

  render () {
    return (
      <div>
        <AppBar
          title='Resource Center'
          iconClassNameRight='muidocs-icon-navigation-expand-more'
          onLeftIconButtonTouchTap={() =>
            this.setState({ open: !this.state.open })}
        />
        <Drawer
          open={this.state.open}
          docked={false}
          onRequestChange={open => this.setState({ open })}
        >
          <SelectableList defaultValue={3}>
            {links.map((link, i) => {
              return (
                <SideBarItem
                  isExact={link.isExact}
                  linkTo={link.linkTo}
                  primaryText={link.text}
                  handleClose={this.handleClose}
                  key={i}
                />
              )
            })}
          </SelectableList>
        </Drawer>
      </div>
    )
  }
}

export default SideNav

@@ -171,24 +171,8 @@
 List
-, makeSelectable
  %7D f
@@ -822,648 +822,8 @@
 %7D%0A%5D%0A
-let SelectableList = makeSelectable(List)%0A%0Afunction wrapState (ComposedComponent) %7B%0A  return class SelectableList extends Component %7B%0A    componentWillMount () %7B%0A      this.setState(%7B%0A        selectedIndex: this.props.defaultValue%0A      %7D)%0A    %7D%0A%0A    handleRequestChange = (event, index) =%3E %7B%0A      this.setState(%7B%0A        selectedIndex: index%0A      %7D)%0A    %7D%0A%0A    render () %7B%0A      return (%0A        %3CComposedComponent%0A          value=%7Bthis.state.selectedIndex%7D%0A          onChange=%7Bthis.handleRequestChange%7D%0A        %3E%0A          %7Bthis.props.children%7D%0A        %3C/ComposedComponent%3E%0A      )%0A    %7D%0A  %7D%0A%7D%0ASelectableList = wrapState(SelectableList)
 %0Acla
@@ -1409,39 +1409,12 @@
    %3C
-SelectableList defaultValue=%7B3%7D
+List
 %3E%0A  
@@ -1765,18 +1765,8 @@
   %3C/
-Selectable
 List

Use List instead of SelectableList