Dynamic InnerBlocks templates

Hi,

I’m currently building a new products section for our website. We want to use Gutenberg so our editors can create archive pages easier instead of working with ACF’s flexible layouts.

They have the choice to create a product overview block. With the following options:
Rows: 1 or 2
Columns: 1, 2, 3 or 4
Products: Random, Sort by date, Popularity and handpicked.

I have 2 blocks:
ProductOverview and ProductBlock. The ProductOverview is loading the ProductBlock component for Random, Sort by date or popularity or the InnerBlocks component when handpicked is chosen.

Random, Sort by date and Popularity are working. But when i choose handpicked now, the number of ProductBlock’s doesn’t change. My InnerBlock looks like follows:

<InnerBlocks
	template={this.getProductOverviewTemplates(this.props.attributes.rows * this.props.attributes.columns)}
	key="children"
	allowedBlocks={ [ 'fw-gutenberg/product-block' ] }
	templateLock={ true }
/>

As you can see, the InnerBlocks has an attribute named template. The method “getProductOverviewTemplates” receives the number of templates it should return.

getProductOverviewTemplates(count) {
	let templates = [];

	for (let i = 0; i < count; i++) {
		templates.push([
			'fw-gutenberg/product-block'
		]);
	}

	return templates;
}

When i select 1 row and 2 columns, getProductOverviewTemplates is returning the following:
[
[“fw-gutenberg/product-block”],
[“fw-gutenberg/product-block”]
]

With 2 rows and 2 columns, i’m getting:
[
[“fw-gutenberg/product-block”],
[“fw-gutenberg/product-block”],
[“fw-gutenberg/product-block”],
[“fw-gutenberg/product-block”]
]

But the number of ProductBlocks in my InnerBlocks container is still 2.

I’ve already tried to do a forceUpdate(), but that doesn’t work either.

Someone who can help?