{"action":"opened","issue":{"url":"https://api.github.com/repos/gcanti/tcomb-form/issues/241","labels_url":"https://api.github.com/repos/gcanti/tcomb-form/issues/241/labels{/name}","comments_url":"https://api.github.com/repos/gcanti/tcomb-form/issues/241/comments","events_url":"https://api.github.com/repos/gcanti/tcomb-form/issues/241/events","html_url":"https://github.com/gcanti/tcomb-form/issues/241","id":113417130,"number":241,"title":"Separating fields in bootstrap columns (template questions)","user":{"login":"staminaloops","id":11683210,"avatar_url":"https://avatars.githubusercontent.com/u/11683210?v=3","gravatar_id":"","url":"https://api.github.com/users/staminaloops","html_url":"https://github.com/staminaloops","followers_url":"https://api.github.com/users/staminaloops/followers","following_url":"https://api.github.com/users/staminaloops/following{/other_user}","gists_url":"https://api.github.com/users/staminaloops/gists{/gist_id}","starred_url":"https://api.github.com/users/staminaloops/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/staminaloops/subscriptions","organizations_url":"https://api.github.com/users/staminaloops/orgs","repos_url":"https://api.github.com/users/staminaloops/repos","events_url":"https://api.github.com/users/staminaloops/events{/privacy}","received_events_url":"https://api.github.com/users/staminaloops/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-10-26T18:11:48Z","updated_at":"2015-10-26T18:11:48Z","closed_at":null,"body":"I really like this project.\r\nSince I didnt want to write a template for each form, I'm trying to write a template that I can use to all forms, dividing the fields for 3 bootstrap columns.\r\n\r\nI try this, but I get an error: Error: Invariant Violation: Struct.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.\r\n\r\nI just started using tcomb forms, so maybe I'm doing something very wrong. Any thoughts? Thanks :)\r\n\r\n```\r\nimport _ from 'lodash';\r\n// https://github.com/gcanti/tcomb-form/blob/master/GUIDE.md\r\nvar t = require('tcomb-form');\r\nvar MyForm = t.form.Form;\r\n\r\n\r\n/* \r\n* Selects\r\n*/\r\nvar Zones = t.enums({\r\n\t2: 'Lisboa',\r\n\t6: 'Cascais',\r\n\t5: 'Ericeira'\r\n});\r\n\r\nvar PropertyType = t.enums({\r\n\t0: 'Apartment',\r\n\t1: 'House',\r\n\t2: 'Loft',\r\n\t3: 'Boat',\r\n\t4: 'Camper / RV',\r\n\t5: 'Other'\r\n})\r\n\r\nvar PropertyCondition = t.enums({\r\n\t0: 'New',\r\n\t1: 'Need Work',\r\n\t2: 'Bad Conditions'\r\n})\r\n\r\nvar FurnitureCondition = t.enums ({\r\n\t0: 'Good',\r\n\t1: 'Need Work',\r\n\t2: 'None'\r\n})\r\n\r\n// Number of things - bedroom, bath, beds, etc\r\nvar ThingsInNumbers = t.enums ({\r\n\t0: '0',\r\n\t1: '1',\r\n\t2: '2',\r\n\t3: '3',\r\n\t4: '4',\r\n\t5: '5',\r\n\t6: '6',\r\n\t7: '7',\r\n\t8: '8',\r\n\t9: '9',\r\n\t10: '10',\r\n\t11: '11',\r\n\t12: '12',\r\n\t13: '13',\r\n\t14: '14',\r\n\t15: '15'\r\n})\r\n\r\n\r\n/*\r\n* House caracteristics form model\r\n*/\r\n\r\nvar HouseCaracteristics = {\r\n\tgeo_zone_id: Zones,\r\n\tapt_address: t.Str,\r\n\tapt_zip_code: t.Num,\r\n\tproperty_type: t.maybe(PropertyType),\r\n\tyear: t.maybe(t.Num),\r\n\tarea: t.maybe(t.Num),\r\n\tapt_condition: t.maybe(PropertyCondition),\r\n\tapt_furniture: t.maybe(FurnitureCondition),\r\n\tbedrooms: t.maybe(ThingsInNumbers),\r\n\tbathrooms: t.maybe(ThingsInNumbers),\r\n\tnum_bed_king: t.maybe(ThingsInNumbers),\r\n\tnum_bed_queen: t.maybe(ThingsInNumbers),\r\n\tnum_bed_twin: t.maybe(ThingsInNumbers)\r\n}\r\n\r\nvar HouseCaracteristicsModel = t.struct (HouseCaracteristics)\r\n\r\nvar objectToArray = _.keys(HouseCaracteristics)\r\n\r\nvar chunk = _.chunk(objectToArray, 5);\r\n\r\nvar caracteristicsLayout = function(locals){\r\n\tchunk.map(function(result, index){\r\n\t\treturn(\r\n\t\t  <div key={index} className='col-md-4'>\r\n\t    \t       { result.map (function(r, i) {\r\n\t    \t\t     return(<div key={i}>{locals.inputs.r}</div>)\r\n\t    \t       }) }\r\n\t        </div>\r\n\t\t)\r\n\t\t})\r\n}\r\n\r\n\r\nvar HouseCaracteristicsForm = React.createClass({\r\n\r\n\trender: function(){\r\n\r\n\t\tvar options = _.extend (\r\n\t\t\t{template: caracteristicsLayout},\r\n\t\t\tthis.props.options\r\n\t\t)\r\n\r\n\t\treturn (\r\n\t\t\t<div>\r\n\t\t\t\t<MyForm \r\n\t\t\t\t\ttype={HouseCaracteristicsModel}\r\n\t\t\t\t\tvalue={this.props.value}\r\n\t\t\t\t\tonChange={this.props.onChange}\r\n\t\t\t\t\toptions={options} \r\n\t\t\t\t/>\r\n\t\t\t</div>\r\n\t\t)\r\n\t}\r\n})\r\n\r\nexport default HouseCaracteristicsForm\r\n```"}}