Pass value to nested attribute

[tomektomczuk]

I have a problem with passing value to nested attribute.

I have an object

margins = {
            'xs': {
                'marginTop': '-',
                'marginRight': '-',
                'marginBottom': '-',
                'marginLeft': '-'
            }
            'md': {
                'marginTop': '-',
                'marginRight': '-',
                'marginBottom': '-',
                'marginLeft': '-'
            }
            'lg': {
                'marginTop': '-',
                'marginRight': '-',
                'marginBottom': '-',
                'marginLeft': '-'
            }
            'xl': {
                'marginTop': '-',
                'marginRight': '-',
                'marginBottom': '-',
                'marginLeft': '-'
            }
            'hd': {
                'marginTop': '-',
                'marginRight': '-',
                'marginBottom': '-',
                'marginLeft': '-'
            }
        }

and a function that passing 4 values

const {
            attributes: { margins, paddings },
            setAttributes,
        } = props;
    
const updateProps = ( breakName, type, name, size ) => {
    
                if ( breakName && type === 'margin' && name && size ) {
                    const newMargins = { ...margins };
                    newMargins[ breakName ][ name ] = size;
                    setAttributes( { margins: newMargins } );
                } else if ( breakName && type === 'padding' && name && size ) {
                    const newPaddings = { ...paddings };
                    newPaddings[ breakName ][ name ] = size;
                    setAttributes( { paddings: newPaddings } );
                }
            };

For some reasons when I pass updateProps(xl, margin, marginTop, 16) all breakpoints (xs, md, lg, xl, hd) get the same value from size. Could you tell me what am I doing incorrectly ?

[tomektomczuk]

ok so we have done it this way and it's now working. Is there a better way?

const updateProps = ( breakName, type, name, size ) => {
			if ( breakName && type === 'margin' && name && ( (size || size === '-')) ) {
				const newMargins = { ...margins };
				const breakObject = {...newMargins[breakName]};
				breakObject[name] = size;
				newMargins[breakName] = breakObject;
				newMargins[ breakName ][ name ] = size;
				setAttributes( { margins: newMargins } );
			} else if ( breakName && type === 'padding' && name && ( (size || size === '-')) ) {
				const newPaddings = { ...paddings };
				const breakObject = {...newPaddings[breakName]};
				breakObject[name] = size;
				newPaddings[breakName] = breakObject;
				newPaddings[ breakName ][ name ] = size;
				setAttributes( { paddings: newPaddings } );
			}
		};

[t-hamano]

I would do this (not tested):

const updateSpacingAttributes = ( property, breakPoint, direction, value ) => {
	const newAttribute = {
		...attribute[ property ],
		[ breakPoint ]: {
			...attribute[ property ][ breakPoint ],
			[ direction ]: value,
		}
	}
	setAttributes( { [ property ]: newAttribute } )
};

Since the spread syntax is shallow copy, the key is to explicitly copy nested properties as well. Argument names are also made more meaningful.