0

I'm trying to push to an array some values from a select box, when clicking a button but I get this error.

Uncaught TypeError: Cannot read property 'push' of undefined

My code for the button is

el(IconButton, {
    icon: 'plus',
    label: 'Add',
    onClick: function(e){
         list.push(postID)
         console.log(list)
    }
})

Of course i declared these attibutes

attributes: {
    postID: {
        type: 'number',
    },
    list: {
        type: 'array'
    }
}

postID get updated every time when the select box changes, and what I'm trying to do it's to add the postID value to an array of values

Full block code:

var teams = [];
$.getJSON('/wp-json/wp/v2/team?per_page=100', function (data) {
    $.each(data, function (index, elem) {
        teams.push({
            label: data[index]['title']['rendered'],
            value: data[index]['id']
        })
    })
});

    (function (blocks, editor, components, i18n, element) {
        var el = wp.element.createElement
        var registerBlockType = wp.blocks.registerBlockType
        var SelectControl = components.SelectControl
        var IconButton = components.IconButton
        var InspectorControls = wp.editor.InspectorControls

        registerBlockType('valida/team', { // The name of our block. Must be a string with prefix. Example: my-plugin/my-custom-block.
            title: i18n.__('Team'), // The title of our block.
            description: i18n.__('team'), // The description of our block.
            icon: 'admin-users', // Dashicon icon for our block. Custom icons can be added using inline SVGs.
            category: 'valida-blocks', // The category of the block.
            attributes: { // Necessary for saving block content.
                postID: {
                    type: 'number',
                },
                list: {
                    type: 'array'
                }
            },
            edit: function (props) {
                var attributes = props.attributes
                var postID = attributes.postID
                var list = attributes.list
                return [
                    el(InspectorControls, {
                            key: 'inspector'
                        }, // Display the block options in the inspector panel.
                        el(components.PanelBody, {
                            title: i18n.__('Home section settings'),
                            className: 'block-home-section-settings',
                            initialOpen: true
                        }, ),
                        el('div', {
                                className: 'inspector-block'
                            },
                            el('ul', {
                                className: 'selected-list'
                            }),
                            el(SelectControl, {
                                className: 'team-selector',
                                label: 'Select member',
                                value: attributes.postID,
                                options: teams,
                                onChange: function (id) {
                                    props.setAttributes({
                                        postID: id
                                    })
                                },
                            }),
                            el(IconButton, {
                                icon: 'plus',
                                label: 'Add',
                                onClick: function(e){
                                    list.push(postID)
                                    console.log(postID)
                                }
                            })
                        )
                    ),
                    el('div', {
                        className: props.className
                    })
                ]
            },

            save: function (props) {
                return null
            }
        })

    })(
        window.wp.blocks,
        window.wp.editor,
        window.wp.components,
        window.wp.i18n,
        window.wp.element
    )
  • What's the full code of your component? It's difficult to tell where you've put each block of code. – Jacob Peattie Apr 18 '19 at 7:03
  • Ok so you've declared the list in the block attributes. But have you actually defined list from within the el() context? Because the error 'push' of undefined says that the list variable hasn't been defined. – Sally CJ Apr 18 '19 at 7:39
  • @JacobPeattie added in the original post – Razvan Cuceu Apr 18 '19 at 9:49
  • @SallyCJ please check the full code in the original post – Razvan Cuceu Apr 18 '19 at 9:50
  • @RazvanCuceu, set a default value for the list prop - attributes: { list: { type: 'array', default: [], ... }, ... } – Sally CJ Apr 18 '19 at 14:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.