How to use the mithril.component function in mithril

view : function(ctrl, options) {
        var field  = options.field;
        
        return m("div", { class : css.container },
            field.instructions ? m.component(instructions, { field : field.instructions }) : null,
            (field.children || []).map(function(section) {
                return m("div", { class : css.section },
                    m.component(children, assign({}, options, {
                        // Don't want to repeat any incoming class that children might've passed in
                        class  : false,
                        fields : section.children
                    }))
                );
            })
        );
    }
};

}
                }),
                m.component(block, {
                    label: 'Refresh',
                    icon: {
                        svg: {
                            group: 'navigation',
                            name: 'refresh'
                        },
                        class: 'md'
                    }
                })
            ]
        }),

        m.component(titleBlock, {
            title: 'Iconset',
            info: m('p',
                m.trust('SVG icons from <a href="https://github.com/Templarian/MaterialDesign">Templarian / Material Design</a>')
            ),
            content: [
                m.component(block, {
                    label: 'Barcode',
                    icon: {
                        svg: {
                            name: 'barcode',
                            iconSet: 'mdi'
                        },
                        class: 'mdi'
                    }
                }),
                m.component(block, {

'Select a list below to see the projects. or click ',
                        m('i.fa.fa-bars'),
                        ' button above to toggle.'
                    ])
                ] : '',
                m.component(Collections, ctrl),
                m.component(Filters, {
                    activeFilter : ctrl.activeFilter,
                    updateFilter : ctrl.updateFilter,
                    nameFilters : ctrl.nameFilters,
                    tagFilters : ctrl.tagFilters
                })
            ]) : '',
            mobile && ctrl.showSidebar() ? '' : m('.db-main', { style : poStyle },[
                ctrl.refreshView() ? m('.spinner-div', m('i.fa.fa-refresh.fa-spin')) : '',
                ctrl.data().length === 0 ? ctrl.nonLoadTemplate() : m('.db-poOrganizer',  m.component( ProjectOrganizer, {
                        filesData : ctrl.data,
                        updateSelected : ctrl.updateSelected,
                        updateFilesData : ctrl.updateFilesData,
                        LinkObject : LinkObject,
                        wrapperSelector : args.wrapperSelector,
                        allProjects : ctrl.allProjects,
                        reload : ctrl.reload,
                        resetUi : ctrl.resetUi
                    })
                )
            ]),
            mobile ? '' : m('.db-info-toggle',{
                    onclick : function _showInfoOnclick(){
                        ctrl.showInfo(!ctrl.showInfo());
                        $osf.trackClick('dashboard', 'information-panel', 'show-hide-information-panel');
                    }

public view = (ctrl: RateController) => {
        return m("div.column", [
            m.component(this.changeDateComponent, ctrl.vm.day.clone()),
            m.component(this.listComponent, ctrl.vm),
            m.component(new modal(ctrl.vm.modalTitle(), ctrl.vm.isAddModalOpen,
                () => m.component(this.formComponent, { item: ctrl.vm.item(), editDuration: ctrl.vm.editDates() }),
                () => [
                    m("button.ui.left.floated.button[type='button']", {
                        onclick: ctrl.vm.editDuration,
                        disabled: ctrl.vm.item().id() <= 0 || ctrl.vm.editDates()
                    }, "Edit Duration"),
                    m("button.ui.approve.button[type='button']", { onclick: ctrl.vm.expire, disabled: ctrl.vm.item().id() <= 0 }, "Expire"),
                    m("button.ui.approve.button[type='button']", { onclick: ctrl.vm.save }, ctrl.vm.modalActionName()),
                    m("button.ui.cancel.button[type='button]", "Cancel")
                ]))
        ]);
    };
}

displayTabContent = () => {
                const c_opts = {
                        user
                    },
                    tabs = {
                        '#creators': m.component(userCreators, c_opts),
                        '#friends': m.component(userFriends, c_opts),
                        '#follows': m.component(userFollows, c_opts),
                        '#followers': m.component(userFollowers, c_opts)
                    };

                hash(window.location.hash);

                if (_.isEmpty(hash()) || hash() === '#_=_') {
                    return tabs['#friends'];
                }

                return tabs[hash()];
            };

el.select();
                        }
                    })
                )
            ),
            m("li",
                m("label",
                    "Max: ",
                    m("input[type=number]", {
                        oninput : m.withAttr("value", update.bind(null, options.ref, "max")),
                        value   : details.max || ""
                    })
                )
            ),
            m.component(types.components.fields.edit, {
                details : details,
                ref     : options.ref
            })
        );
    }
};

beforeAll(() => {
            spyOn(m, 'component').and.callThrough();
            projectPostDetail = ProjectPostDetailsMockery()[0];
            const project = m.prop({id: 1231});
            const component = m.component(projectPosts, {
                    project: project
                }),
                view = component.view(component.controller({
                    project: project
                }));

            $output = mq(view);
        });

            return m('div', _.map(ctrl.aonAndFlex_Sub_3, (collection, index) => m.component(projectRowWithHeader, {
                    collection,
                    title: collection.title,
                    ref: `home_${(collection.hash === 'all' ? 'score' : collection.hash)}`,
                    showFriends: collection.showFriends,
                    isOdd: index & 1
                }))
            );

view: function(ctrl, args) {
        const project = _.first(ctrl.projectDetails()),
            acceptedIndex = ctrl.acceptedIndex,
            account = _.first(ctrl.projectAccount());

        const terms = project.mode === 'flex' ? publishVM.flexTerms(project) :
          project.mode === 'aon' ? publishVM.aonTerms(project, ctrl.expiresAt()) :
                                   publishVM.subTerms(project);

        return [project && account ? [
            (project.is_owner_or_admin ? m.component(projectDashboardMenu, {
                project: m.prop(project),
                hidePublish: true
            }) : ''),
            m(`.w-section.section-product.${project.mode}`),
            m('.w-section.section', [
                m('.w-container', [
                    m('.w-row', [
                        m('.w-col.w-col-3'),
                        m('.w-col.w-col-6', [
                            m('.u-text-center', [
                                m('img.u-marginbottom-20[src=\'/assets/catarse_bootstrap/launch-icon.png\'][width=\'94\']'),
                                m('.fontsize-large.fontweight-semibold.u-marginbottom-20', 'Pronto para lançar sua campanha?'),
                                m('.fontsize-base.u-marginbottom-30', 'Preparamos uma lista com informações importantes para você checar antes de colocar seu projeto no ar!')
                            ])
                        ]),
                        m('.w-col.w-col-3')

content: m('.demo-list', [
                m.component(listTile, {
                    title: titleLineText,
                    subtitle: infoDoubleLineText
                }),
                m.component(listTile, {
                    title: titleLineText,
                    subtitle: infoDoubleLineText
                }),
                m.component(listTile, {
                    title: titleLineText,
                    subtitle: infoDoubleLineText
                })
            ])
        }),
        m.component(titleBlock, {
            title: 'Three lines',
            content: m('.demo-list', [
                m.component(listTile, {
                    title: titleLineText,
                    highSubtitle: infoDoubleLineText
                }),
                m.component(listTile, {
                    title: titleLineText,
                    highSubtitle: infoDoubleLineText
                }),
                m.component(listTile, {
                    title: titleLineText,
                    highSubtitle: infoDoubleLineText
                })
            ])
        }),