{"action":"created","issue":{"url":"https://api.github.com/repos/jordangarcia/nuclear-react-mixin/issues/2","labels_url":"https://api.github.com/repos/jordangarcia/nuclear-react-mixin/issues/2/labels{/name}","comments_url":"https://api.github.com/repos/jordangarcia/nuclear-react-mixin/issues/2/comments","events_url":"https://api.github.com/repos/jordangarcia/nuclear-react-mixin/issues/2/events","html_url":"https://github.com/jordangarcia/nuclear-react-mixin/issues/2","id":54103127,"number":2,"title":"Strategies for nested views","user":{"login":"tomconroy","id":1223187,"avatar_url":"https://avatars.githubusercontent.com/u/1223187?v=3","gravatar_id":"","url":"https://api.github.com/users/tomconroy","html_url":"https://github.com/tomconroy","followers_url":"https://api.github.com/users/tomconroy/followers","following_url":"https://api.github.com/users/tomconroy/following{/other_user}","gists_url":"https://api.github.com/users/tomconroy/gists{/gist_id}","starred_url":"https://api.github.com/users/tomconroy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tomconroy/subscriptions","organizations_url":"https://api.github.com/users/tomconroy/orgs","repos_url":"https://api.github.com/users/tomconroy/repos","events_url":"https://api.github.com/users/tomconroy/events{/privacy}","received_events_url":"https://api.github.com/users/tomconroy/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-01-12T20:34:43Z","updated_at":"2015-04-30T21:03:03Z","closed_at":null,"body":"Heya, I'm wondering best practices for nested views that depend on the reactor. How should data be passed down to child components?\r\n\r\nImagine I have some stores in the reactor that roughly look like this:\r\n\r\n```js\r\n{\r\n  items: {\r\n    1: {\r\n      ...\r\n      children: [1,2,3]\r\n    }, ...\r\n  },\r\n  item_children: {\r\n    1: { ... },\r\n    2: { ... },\r\n    ...\r\n  }\r\n}\r\n```\r\n\r\nSay I'm looping over a Map, and rendering child views:\r\n\r\n```js\r\nthis.state.items.map((item, id) => ItemView({key: id, item: item})\r\n```\r\n\r\nBut the `ItemView` needs to get more stuff out of the reactor...\r\n\r\n```js\r\nvar ItemView = React.createClass({\r\n  render() {\r\n    var item = this.props.item\r\n    var children = reactor.get('item_children', (children) => {\r\n      return children.filter(c => {\r\n        return item.get('children').contains(c.get('id'))\r\n      })\r\n    })\r\n    return div(null, children.map(c => React.DOM.div(null, c.get('body')))) \r\n  }\r\n})\r\n```\r\n\r\nOr, I could just pass the item `id` as props:\r\n\r\n```js\r\nthis.state.items.map((item, id) => ItemView({key: id, itemId: id})\r\n```\r\n\r\n...and then use the mixin like this:\r\n\r\n```js\r\nfunction getItem(itemId){\r\n  return Getter(['items', itemId])\r\n}\r\nfunction getItemChildren(itemId) {\r\n  return Getter(getItem(itemId), 'item_children', (item, children) => {\r\n    return children.filter(c => item.get('children').contains(c.get('id')))\r\n  })\r\n}\r\nvar ItemView = React.createClass({\r\n  mixins: [ReactorMixin(reactor)],\r\n  getDataBindings() {\r\n    return {\r\n      children: getItemChildren(this.props.itemId)\r\n    }\r\n  },\r\n  render() {\r\n    return div(null, this.state.children.map(c => React.DOM.div(null, c.get('body')))) \r\n  }\r\n})\r\n```\r\n\r\nThis second options seems _cleaner_ with the `Getter` logic isolated, but React [advises against](http://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html) using props in `getInitialState`. Maybe this React page is kind of irrelevant since the `reactor` is the \"central source of truth\"\r\n\r\nAny hints what to do in this situation? :smile: "},"comment":{"url":"https://api.github.com/repos/jordangarcia/nuclear-react-mixin/issues/comments/97965604","html_url":"https://github.com/jordangarcia/nuclear-react-mixin/issues/2#issuecomment-97965604","issue_url":"https://api.github.com/repos/jordangarcia/nuclear-react-mixin/issues/2","id":97965604,"user":{"login":"tomconroy","id":1223187,"avatar_url":"https://avatars.githubusercontent.com/u/1223187?v=3","gravatar_id":"","url":"https://api.github.com/users/tomconroy","html_url":"https://github.com/tomconroy","followers_url":"https://api.github.com/users/tomconroy/followers","following_url":"https://api.github.com/users/tomconroy/following{/other_user}","gists_url":"https://api.github.com/users/tomconroy/gists{/gist_id}","starred_url":"https://api.github.com/users/tomconroy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tomconroy/subscriptions","organizations_url":"https://api.github.com/users/tomconroy/orgs","repos_url":"https://api.github.com/users/tomconroy/repos","events_url":"https://api.github.com/users/tomconroy/events{/privacy}","received_events_url":"https://api.github.com/users/tomconroy/received_events","type":"User","site_admin":false},"created_at":"2015-04-30T21:03:03Z","updated_at":"2015-04-30T21:03:03Z","body":"I ended up rolling with the second solution without much issue. Basically pass IDs down in props and use Getters to look them up."}}