-5

I saw a react component that has the state showed below:

class MyComp extends BaseComponent {
      constructor(props) {
        super(props);
        this.state = {
          selectedColumns: [],
          params: {
            offset: 0,
            sort_by: {}
          }
        }
        ...
      }
    }

Then this react component has a method getValue below. Inside this method allParams object is created by using spread syntax. I.e. it is spreading methods argument params, and after that updates params object in components state. 

getValue(params){
  const allParams = {
    ...this.state.params,
    ...params
  }
  this.setState((prevState) => {
    return {
      ...prevState,
      params: allParams
    }
  })
  ...
}

It is then called like below in a child component inside MyComp:

goNext() {
  const offset =  15 // IT IS NOT JSON, it is a value 15.
  this.props.getValue({
    offset
  })
}

I see that setState is ok but is allParams creation correct? Must not the params be an object (json) to be used with ...? Am i missing something?

In other cases the spread syntax is used like this:

const ob1 = {foo: 123}; 
const ob2 = {bar: 234}; 
const merged = {...ob1, ...ob2}; 
console.log(merged) //Output: { foo: 123, bar: 234 }

But in my case it would be:

const ob1 = {foo: 123}; 
const ob2 = 15; 
const merged = {...ob1, ...ob2}; 
console.log(merged) //Output: { foo: 123}, and ob2 is not assigned!
Patrick Roberts
  • 49,224
  • 10
  • 102
  • 153
user1665355
  • 3,324
  • 8
  • 44
  • 84
  • It is a spread operator. You can read articles online for that to gain more understanding on that. – Ankit Agarwal Apr 09 '18 at 09:08
  • "Must not the params be an object" — Both things called `params` **are** objects! – Quentin Apr 09 '18 at 09:09
  • Please see update, I forgot to show how `getValue` is called later on. – user1665355 Apr 09 '18 at 09:11
  • @user1665355 — And you pass it an object. So that's the problem? – Quentin Apr 09 '18 at 09:22
  • @Quentin What I wonder is if `const allParams` is created correctly? When we pass plain number in `goNext` method, the `this.props.getValue` will receive a plain number? and `allParams` will not be assigned `...params` ? – user1665355 Apr 09 '18 at 09:24
  • Your question doesn't make sense. You said "But in my case it would be" … but it isn't. In the earlier code you are dealing only with objects, not numbers. – Quentin Apr 09 '18 at 09:25
  • 1
    I suspect the problem might be that you think `{offset}` means the same as `offset` when it actually means the same as `{"offset": offset}` – Quentin Apr 09 '18 at 09:26
  • @Quentin so ` this.props.getValue({ offset })` created `allParams` object that is ` params: { offset: 15, sort_by: {} }` – user1665355 Apr 09 '18 at 09:27

1 Answers1

0

The ES6 spread operator can be used on Objects to 'spread' their values into another object to create a clone of that object. It is similar in concept to using Object.assign

Sample

const x = { a : 1 };
const y = {...x}; // y = {a:1} Equivalent to : const y = Object.assign({},x);
const z = {...x , b: 2} // z = {a:1,b:2} Equivalent to Object.assign({a:1},{b:2})
const w = {...x , a: 2} // w = {a:2} Equivalent to Object.assign({a:1},{a:2})
const p = {a:2, ...x} // p={a:1} Equivalent to using Object.assign({a:2},{a:1})

Handy link explaining this in the context of Redux

EDIT: Based on discussion in comments: In your goNext method, when this happens:

this.props.getValue({
    offset
})

You are actually creating an object like this {offset:15}. So when this is used in getValue like:

const allParams = {
    ...this.state.params,
    ...params
}

You are essentially overriding the old offset value with 15 and creating a new object. So essentially, we are NOT spreading over 15 but over {offset:15}

Chirag Ravindra
  • 4,760
  • 1
  • 24
  • 35