Service Chooser

serviceChooser.js

define([
        'react',
        'app/js/jsx/reactComponents/Service' // this 'child view' needs to be loaded before calling render on ServiceChooser, so that we can require it synchronously in the render function
        'require'
    ],

    function (React, Service, require) {
       
        var ServiceChooser = React.createClass({

            getInitialState: function () {
                return {total: 0};
            },

            addTotal: function (price) {
                this.setState({total: this.state.total + price});
            },


            render: function () {

                var self = this;

                Service = require('app/js/jsx/reactComponents/Service'); //here we re-evaluate the reference so that it stays up to date as we hot-reload repeatedly

                var services = this.props.items.map(function (s) {
                    return <Service name={s.name} price={s.price} active={s.active} addTotal={self.addTotal}/>;
                });

                return (<div>
                        <h1>Our services</h1>
                         <div id="services">
                        {services}
                        <p id="total">Total <b>${this.state.total.toFixed(2)}</b></p>
                        </div>
                     </div>);
            }
        });

        return ServiceChooser;
    });