Separating fields in bootstrap columns (template questions)

[staminaloops]

I really like this project. Since 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.

I 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.

I just started using tcomb forms, so maybe I'm doing something very wrong. Any thoughts? Thanks :)

Edit: I'm using React 0.13 and tcomb-form: ^0.6.9

import _ from 'lodash';
// https://github.com/gcanti/tcomb-form/blob/master/GUIDE.md
var t = require('tcomb-form');
var MyForm = t.form.Form;

/* 
* Selects
*/
var Zones = t.enums({
    2: 'Lisboa',
    6: 'Cascais',
    5: 'Ericeira'
});

var PropertyType = t.enums({
    0: 'Apartment',
    1: 'House',
    2: 'Loft',
    3: 'Boat',
    4: 'Camper / RV',
    5: 'Other'
})

var PropertyCondition = t.enums({
    0: 'New',
    1: 'Need Work',
    2: 'Bad Conditions'
})

var FurnitureCondition = t.enums ({
    0: 'Good',
    1: 'Need Work',
    2: 'None'
})

// Number of things - bedroom, bath, beds, etc
var ThingsInNumbers = t.enums ({
    0: '0',
    1: '1',
    2: '2',
    3: '3',
    4: '4',
    5: '5',
    6: '6',
    7: '7',
    8: '8',
    9: '9',
    10: '10',
    11: '11',
    12: '12',
    13: '13',
    14: '14',
    15: '15'
})

/*
* House caracteristics form model
*/

var HouseCaracteristics = {
    geo_zone_id: Zones,
    apt_address: t.Str,
    apt_zip_code: t.Num,
    property_type: t.maybe(PropertyType),
    year: t.maybe(t.Num),
    area: t.maybe(t.Num),
    apt_condition: t.maybe(PropertyCondition),
    apt_furniture: t.maybe(FurnitureCondition),
    bedrooms: t.maybe(ThingsInNumbers),
    bathrooms: t.maybe(ThingsInNumbers),
    num_bed_king: t.maybe(ThingsInNumbers),
    num_bed_queen: t.maybe(ThingsInNumbers),
    num_bed_twin: t.maybe(ThingsInNumbers)
}

var HouseCaracteristicsModel = t.struct (HouseCaracteristics)

var objectToArray = _.keys(HouseCaracteristics)

var chunk = _.chunk(objectToArray, 5);

var caracteristicsLayout = function(locals){
    chunk.map(function(result, index){
        return(
          <div key={index} className='col-md-4'>
                   { result.map (function(r, i) {
                     return(<div key={i}>{locals.inputs.r}</div>)
                   }) }
            </div>
        )
        })
}

var HouseCaracteristicsForm = React.createClass({

    render: function(){

        var options = _.extend (
            {template: caracteristicsLayout},
            this.props.options
        )

        return (
            <div>
                <MyForm 
                    type={HouseCaracteristicsModel}
                    value={this.props.value}
                    onChange={this.props.onChange}
                    options={options} 
                />
            </div>
        )
    }
})

export default HouseCaracteristicsForm

[gcanti]

Hi, The problem seems in the caracteristicsLayout function:

var caracteristicsLayout = function(locals){
    // missing return...
    chunk.map(function(result, index){
        return(
          <div key={index} className='col-md-4'>
                   { result.map (function(r, i) {
                     // locals.inputs[r]
                     return(<div key={i}>{locals.inputs.r}</div>)
                   }) }
            </div>
        )
        })
}

This works for me:

var caracteristicsLayout = function(locals){
  return ( 
    <div>
    {
      chunk.map(function(result, index){
        return (
          <div key={index} className='col-md-4'>
             {result.map(function(r, i) {
                return (<div key={i}>{locals.inputs[r]}</div>);
             })}
          </div>
        );
      })
    }
    </div>
  );
};

[staminaloops]

It's one of those cases where a second pair of eyes comes and you say duh. Thank you for your help and thank you for this great project.