CODEWITHSUNDEEP
javascriptecmascript-6
Sooraj
Sooraj

Reputation: 10575

es6 object destructuring not working

I'm trying to assign styles to an object. Initial code was

targetEl.style.top = `${top}px` ;
targetEl.style.display = 'block';
targetEl.style.background = `url(${this.props.imgSrc}) no-repeat`;
targetEl.style.backgroundSize = "1800px 900px";

I tried to use es6 destructuring and rewrote the code like this:

targetEl.style = {...targetEl.style, 
                      top:`${top}px`, 
                      display: 'block', 
                      background: `url(${this.props.imgSrc}) no-repeat`, 
                      backgroundSize:  "1800px 900px" };

But for some reason it does not seem to work. What am I doing wrong?

Upvotes: 0

Views: 670

Answers (2)

Slai
Slai

Reputation: 22906

As a side note, it's a bit more efficient without Object.assign:

const s = targetEl.style; 
s.top = `${top}px`; 
s.display = 'block'; 
s.background = `url(${this.props.imgSrc}) no-repeat`; 
s.backgroundSize = '1800px 900px';

but even more efficient to assign them all at once (How can I set multiple CSS styles in JavaScript?) :

targetEl.style.cssText += `; top = ${top}px, display = 'block', 
    background = url(${this.props.imgSrc}) no-repeat, backgroundSize = '1800px 900px'; `;

Upvotes: 0

Bergi
Bergi

Reputation: 665574

You are not using destructuring, you are using experimental spread syntax in an object literal which creates a new object. You might be used to that when working with immutable data frameworks, but here you really want to assign properties of the targetEl.style CSS declaration object. You do not want to replace the whole .style object with a new one.

Try Object.assign with a plain literal:

Object.assign(targetEl.style, {
    top: `${top}px`, 
    display: 'block', 
    background: `url(${this.props.imgSrc}) no-repeat`, 
    backgroundSize: '1800px 900px'
});

Upvotes: 3

Related Questions