{"action":"created","issue":{"url":"https://api.github.com/repos/jsstyles/react-jss/issues/3","labels_url":"https://api.github.com/repos/jsstyles/react-jss/issues/3/labels{/name}","comments_url":"https://api.github.com/repos/jsstyles/react-jss/issues/3/comments","events_url":"https://api.github.com/repos/jsstyles/react-jss/issues/3/events","html_url":"https://github.com/jsstyles/react-jss/issues/3","id":55181051,"number":3,"title":"How to add multiple rules/classes","user":{"login":"sergiomco","id":147956,"avatar_url":"https://avatars.githubusercontent.com/u/147956?v=3","gravatar_id":"","url":"https://api.github.com/users/sergiomco","html_url":"https://github.com/sergiomco","followers_url":"https://api.github.com/users/sergiomco/followers","following_url":"https://api.github.com/users/sergiomco/following{/other_user}","gists_url":"https://api.github.com/users/sergiomco/gists{/gist_id}","starred_url":"https://api.github.com/users/sergiomco/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sergiomco/subscriptions","organizations_url":"https://api.github.com/users/sergiomco/orgs","repos_url":"https://api.github.com/users/sergiomco/repos","events_url":"https://api.github.com/users/sergiomco/events{/privacy}","received_events_url":"https://api.github.com/users/sergiomco/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2015-01-22T17:15:42Z","updated_at":"2015-01-27T21:39:35Z","closed_at":null,"body":"Hi. I'm testing jss and react-jss and I'm wondering how to compose a component classes based on it's state.\r\n\r\nUsually what I do is (e.g:)\r\n\r\n```\r\n var cx = React.addons.classSet;\r\n  var classes = cx({\r\n    'isNavOpen': this.state.isOpen,\r\n    'navBar':true\r\n  });\r\n\r\n<div className={classes}></div>\r\n```\r\n\r\nSo currently, using jss, i have\r\n```\r\n<div className={this.sheet.classes.navBar}></div>\r\n```\r\nLater the state changes to isOpen = true, and I want a second class/rule to be applied (isNavOpen).\r\nSince the class names are generated in runtime (jss-1) I cannot use React.addons.classSet to compose my classes anymore. \r\n\r\nHow can i accomplish this? \r\n\r\nThanks.\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/jsstyles/react-jss/issues/comments/71733338","html_url":"https://github.com/jsstyles/react-jss/issues/3#issuecomment-71733338","issue_url":"https://api.github.com/repos/jsstyles/react-jss/issues/3","id":71733338,"user":{"login":"sergiomco","id":147956,"avatar_url":"https://avatars.githubusercontent.com/u/147956?v=3","gravatar_id":"","url":"https://api.github.com/users/sergiomco","html_url":"https://github.com/sergiomco","followers_url":"https://api.github.com/users/sergiomco/followers","following_url":"https://api.github.com/users/sergiomco/following{/other_user}","gists_url":"https://api.github.com/users/sergiomco/gists{/gist_id}","starred_url":"https://api.github.com/users/sergiomco/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sergiomco/subscriptions","organizations_url":"https://api.github.com/users/sergiomco/orgs","repos_url":"https://api.github.com/users/sergiomco/repos","events_url":"https://api.github.com/users/sergiomco/events{/privacy}","received_events_url":"https://api.github.com/users/sergiomco/received_events","type":"User","site_admin":false},"created_at":"2015-01-27T21:39:35Z","updated_at":"2015-01-27T21:39:35Z","body":"Looking back now, I think the answer was really obvious.\r\nThis is a really common pattern in react apps, so a helper would be nice, but not imperative.\r\nThe ES6 syntax suggested by @gaearon is simple and direct.\r\n\r\nBut maybe adding a small reference on how to use multiple classes in the example contained in the README.md file could provide better guidance for other folks trying to use react-jss ?\r\n\r\nThanks for both suggestions. "}}