{"action":"closed","issue":{"url":"https://api.github.com/repos/tleunen/react-mdl/issues/355","repository_url":"https://api.github.com/repos/tleunen/react-mdl","labels_url":"https://api.github.com/repos/tleunen/react-mdl/issues/355/labels{/name}","comments_url":"https://api.github.com/repos/tleunen/react-mdl/issues/355/comments","events_url":"https://api.github.com/repos/tleunen/react-mdl/issues/355/events","html_url":"https://github.com/tleunen/react-mdl/issues/355","id":169078778,"number":355,"title":"What's the best way to integrate Tabs with react-router?","user":{"login":"igorsantos07","id":532299,"avatar_url":"https://avatars.githubusercontent.com/u/532299?v=3","gravatar_id":"","url":"https://api.github.com/users/igorsantos07","html_url":"https://github.com/igorsantos07","followers_url":"https://api.github.com/users/igorsantos07/followers","following_url":"https://api.github.com/users/igorsantos07/following{/other_user}","gists_url":"https://api.github.com/users/igorsantos07/gists{/gist_id}","starred_url":"https://api.github.com/users/igorsantos07/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/igorsantos07/subscriptions","organizations_url":"https://api.github.com/users/igorsantos07/orgs","repos_url":"https://api.github.com/users/igorsantos07/repos","events_url":"https://api.github.com/users/igorsantos07/events{/privacy}","received_events_url":"https://api.github.com/users/igorsantos07/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/tleunen/react-mdl/labels/question","name":"question","color":"cc317c"}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-08-03T08:45:51Z","updated_at":"2016-08-14T22:06:00Z","closed_at":"2016-08-14T22:06:00Z","body":"I would like to use the MDL Tabs for my application that uses `react-router` for navigation...\r\n\r\nInitially I was using the pure JS, but had some trouble with its events. Then, I found this library, but the best I could do still seems quite _ugly_:\r\n\r\n```jsx\r\nexport default class NavigationBar extends Component {\r\n\r\n  constructor(props) {\r\n    super(props)\r\n    this.state = {\r\n      active: 0\r\n    }\r\n  }\r\n\r\n  //FIXME: holy cow there MUST be a better way to use Tabs for navigation!\r\n  onChange(id) {\r\n    let node = findDOMNode(this)\r\n    let path = node.children[0].children[id].attributes.to.nodeValue\r\n    this.setState({ active: id })\r\n    hashHistory.push(path)\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Tabs ripple activeTab={this.state.active} onChange={this.onChange.bind(this)}>\r\n        <Tab to=\"/\">Home</Tab>\r\n        <Tab to=\"/stuff\">Stuff</Tab>\r\n        <Tab to=\"/etc\">Etc</Tab>\r\n      </Tabs>\r\n    )\r\n  }\r\n\r\n}\r\n```\r\n\r\nMy first thought was something like `<Tab><Link to=\"/\">Home</Link></Tab>` but that triggers an error because there is an anchor inside another :("}}
{"actor":{"display_login":"tleunen"}}