Gutenberg – Factory Function / Utility Function / Helper Function

const utilityFunction = () => ({
		col_class: 'col col-lg-4 col-md-6 col-12 bg-black text-white',
		col_style: 'padding:0px;',
		col_id: '',
		col_inner_class: 'col-inner d-flex align-items-center justify-content-md-center',
		col_inner_style: 'padding-top:15px;',
		data_aos: 'fade-up',
		data_aos_delay: '',
		title: '',
		title_class: 'bold',
		title_style: '',
		content: '',
		code_block: '',
		col_img_class: 'position-relative',
		col_img_style: 'border-top:4px solid white;border-right:2px solid white;',
		img: '',
		img_class: 'w-100',
		img_style: 'height:200px;object-fit:cover;margin-bottom:-5px;',
	});

Here’s how to use in the how to addFeature or addColumn

	const addFeature = () => {
		setAttributes( {
			features: [
				...features,
				createNewColumn(),
			],
		} );
	};

Here’s how to use in the mapped buttons:

<Button
    style={{
		border:'1px solid',
		background:'white'
	}}
	className={`button-hero`}
    onClick={() => {
        const newFeatures = [...features]; // Create a copy of the features array
        const newColumn = createNewColumn();
        newFeatures.splice(index, 0, newColumn); // Insert the new column at the current index
        setAttributes({ features: newFeatures }); // Update the features attribute with the new array
    }}
>
    {__('Add Column Above')}
</Button>