{"action":"created","issue":{"url":"https://api.github.com/repos/yannickcr/eslint-plugin-react/issues/651","repository_url":"https://api.github.com/repos/yannickcr/eslint-plugin-react","labels_url":"https://api.github.com/repos/yannickcr/eslint-plugin-react/issues/651/labels{/name}","comments_url":"https://api.github.com/repos/yannickcr/eslint-plugin-react/issues/651/comments","events_url":"https://api.github.com/repos/yannickcr/eslint-plugin-react/issues/651/events","html_url":"https://github.com/yannickcr/eslint-plugin-react/issues/651","id":162786413,"number":651,"title":"Request: Disallow iteration in render","user":{"login":"TheSavior","id":249164,"avatar_url":"https://avatars.githubusercontent.com/u/249164?v=3","gravatar_id":"","url":"https://api.github.com/users/TheSavior","html_url":"https://github.com/TheSavior","followers_url":"https://api.github.com/users/TheSavior/followers","following_url":"https://api.github.com/users/TheSavior/following{/other_user}","gists_url":"https://api.github.com/users/TheSavior/gists{/gist_id}","starred_url":"https://api.github.com/users/TheSavior/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/TheSavior/subscriptions","organizations_url":"https://api.github.com/users/TheSavior/orgs","repos_url":"https://api.github.com/users/TheSavior/repos","events_url":"https://api.github.com/users/TheSavior/events{/privacy}","received_events_url":"https://api.github.com/users/TheSavior/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2016-06-28T21:01:09Z","updated_at":"2016-06-29T05:25:58Z","closed_at":null,"body":"What are your thoughts on a rule like this:\r\n\r\nInvalid\r\n```\r\nReact.createClass({\r\n  propTypes: {\r\n    array: React.PropTypes.array\r\n  },\r\n\r\n  render: function() {\r\n    return (\r\n      <div>\r\n      {\r\n        this.props.array.map((item) => <MyComponent {...item})\r\n      }\r\n      </div>\r\n    );\r\n  }\r\n});\r\n```\r\n\r\nValid\r\n```\r\nReact.createClass({\r\n  propTypes: {\r\n    array: React.PropTypes.array\r\n  },\r\n\r\n  render: function() {\r\n    return (\r\n      <div>\r\n      {this.renderItems()}\r\n      </div>\r\n    );\r\n  },\r\n\r\n  renderItems: function() {\r\n    return this.props.array.map((item) => <MyComponent {...item});\r\n  }\r\n});\r\n```"},"comment":{"url":"https://api.github.com/repos/yannickcr/eslint-plugin-react/issues/comments/229259697","html_url":"https://github.com/yannickcr/eslint-plugin-react/issues/651#issuecomment-229259697","issue_url":"https://api.github.com/repos/yannickcr/eslint-plugin-react/issues/651","id":229259697,"user":{"login":"TheSavior","id":249164,"avatar_url":"https://avatars.githubusercontent.com/u/249164?v=3","gravatar_id":"","url":"https://api.github.com/users/TheSavior","html_url":"https://github.com/TheSavior","followers_url":"https://api.github.com/users/TheSavior/followers","following_url":"https://api.github.com/users/TheSavior/following{/other_user}","gists_url":"https://api.github.com/users/TheSavior/gists{/gist_id}","starred_url":"https://api.github.com/users/TheSavior/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/TheSavior/subscriptions","organizations_url":"https://api.github.com/users/TheSavior/orgs","repos_url":"https://api.github.com/users/TheSavior/repos","events_url":"https://api.github.com/users/TheSavior/events{/privacy}","received_events_url":"https://api.github.com/users/TheSavior/received_events","type":"User","site_admin":false},"created_at":"2016-06-29T05:25:58Z","updated_at":"2016-06-29T05:25:58Z","body":"Our team likes and enforces this rule because we find it easier and quicker to read the render function to see what a component is doing by seeing the well named function calls instead of inline maps.\r\n\r\nReal code sample from our repo:\r\n\r\n```\r\nReact.createClass({\r\n  // ...\r\n  render() {\r\n    return (\r\n      <div>\r\n        <table>\r\n          <tbody>\r\n            {this.renderCashRows()}\r\n            {this.renderTransferRows()}\r\n            {this.renderUnsureRows()}\r\n            {this.renderUnsupportedRows()}\r\n          </tbody>\r\n        </table>\r\n        {this.renderTaxConsequences()}\r\n      </div>\r\n    );\r\n  }\r\n  // ...\r\n});\r\n```\r\n\r\nWe find it way more readable to see that than to see the inline maps those functions are doing. Because of this, we socially enforce it everywhere, but want to be able to lint for it as well.\r\n"}}
{"actor":{"display_login":"TheSavior"}}