Update UI when pushing new object to an array attribute

In one of my blocks I’m using an array of cards so that a user can add multiple cards to a block without having to use nested blocks and complicate the HTML.

The attributes look like this:

attributes: {     cards: {         type: 'array',         source: 'query',         selector: '.staff-list-item',         default: [],         query: {             name: {                 type: 'array',                 source: 'children',                 selector: 'h3',                 default: 'Enter name.',             },             title: {                 type: 'array',                 source: 'children',                 selector: 'p',                 default: 'Enter title.',             },             mediaID: {                 type: 'number',                 source: 'attribute',                 attribute: 'data-id',                 selector: 'img',             },             mediaURL: {                 type: 'string',                 source: 'attribute',                 attribute: 'src',                 selector: 'img',             },         },     }, } 

I then have a button component that can add one of these cards:

el(components.Button, { className: 'button button-large', onClick: onAddCard }, 'Add Card') 

And the function it calls is:

function onAddCard() {     return props.attributes.cards.push({         name: 'Enter name.',         title: 'Enter title.'     }) } 

So I basically push a new object into the cards… however what I’ve found is that even though I’m returning the objects… it doesn’t update the UI until I click OUT of the block… how can I get it to work similar to setAttributes?

I even tried:

props.attributes.cards.push({     name: 'Enter name.',     title: 'Enter title.' })  return props.setAttributes( {     cards: props.attributes.cards });