How to use a function in a mapped component in maquettejs

Question

im currently having a problem when i try to use a function in a createMapping component, this is the code

itemConcurso.js

import {h, createMapping} from 'maquette';

    function enterAnim(domNode, properties) {
        domNode.className += ' animated fadeInUp';
    }

    const item = createMapping(
        function getSourceKey(source) {
            console.log(source);
            return source;
        },
        function createTarget(item, i) {
            return (func) => {

                const helper = () => { func(item.Id) };

                return {
                    renderMaquette: function() {
                        return h(`ul#${item.Id}.item-concurso.list-group.mt-3`, { key: item.Id, enterAnimation: enterAnim, onclick: helper}, [
                            h('li.list-group-item.list-group-item.list-heading-primary', [
                                h('div.pull-right', [
                                    h('h4', item.Ministerio__c)
                                    ]), 
                                h('h3', item.Name.toUpperCase())
                                ]),
                            h("li.list-group-item", [   
                                h('h4', item.activity),
                                h('ul', [
                                    h('li', ['Perfil buscado: ', item.Nombre_de_perfil__c]),
                                    h('li', ['Conocimientos requeridos: ', item.Conocimientos_tecnicos_requeridos__c]),
                                    h('li', ['Descripción: ', item.Descripcion__c]),
                                    ])  
                                ])
                            ]);
                    }
                }
            };
        },
        function updateTarget(updatedSource, target) {
            console.log(updatedSource);
        });

    export default item;

App.js

function probando(id) {
    console.log(id);
}

const app = function() {
    return {
        renderMaquette: function() {
            return h('div#concurso', [
                searchB.renderMaquette(),
                itemConcurso.results.map(function(component) {
                    return component(test).renderMaquette();
                })]);
        }
    }
}

It actually works, but in the first time i click the component it throws the following error:

vendor.bundle.js:15132 Uncaught Error: Functions may not be updated on subsequent renders (property: onclick). Hint: declare event handler functions outside the render() function.
    at updateProperties (vendor.bundle.js:15132)
    at updateDom (vendor.bundle.js:15370)
    at updateChildren (vendor.bundle.js:15241)
    at updateDom (vendor.bundle.js:15369)
    at Object.update (vendor.bundle.js:15393)
    at doRender (vendor.bundle.js:15636)

I tried many things but it seems like there is a thing that im not understanding

Answer 1

The problem with the code is that createTarget returns a function which produces new {renderMaquette: ...} instances during the app.renderMaquette.

Because these instances are new, a new helper is created, hence the error.

If you want to pass a func to item, you could export a function createItem(func) instead of export default item