How do I concat two objects into one - React-Native state

Question

Here are two objects one is creating onload of page while another is I want to add on button click into the current state

constructor(props){
    super(props);
    this.state = {
        marked: null,
        tempMarkedDates: [],
    }
    this.toggle = this.toggle.bind(this);
}


// First object into marked is like

console.log(JSON.stringify(this.state.marked));

Output ::

[
    {
        "2019-01-02":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        },
        "2019-01-04":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        },
        "2019-01-08":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        },
        "2018-12-29":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        },
        "2018-11-27":{
            "disabled":true,"selected":true,"selectedColor":"#fc3232"
        },
    }
]

Working from my own answer here on stack overflow

//Now I am creating new object like

day = "2019-01-10"
let obj = {};
obj[day] = {
    disabled: true, 
    selected: true, 
    selectedColor: '#fc3232'
}

//So the output will be

[
    {
        "2018-12-30":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        }
    }
]

I want to merge both the object and update this.state.marked

And it should be remain object after concatenation, while my code is changing it into array

Desire Output - Need to join last or first date object of 30-12-2018
[
    {
        "2019-01-02":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        },
        "2019-01-04":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        },
        "2019-01-08":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        },
        "2018-12-29":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        },
        "2018-11-27":{
            "disabled":true,"selected":true,"selectedColor":"#fc3232"
        },
        "2018-12-30":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        }
    }
]

So need your help to concat the both object for React native state.

Solution 1

We can use the assign() method of javascript.

Reference: https://stackoverflow.com/a/51143342/3449578

let newstate = Object.assign(obj , this.state.marked[0])

this.setState({marked: newstate });

Solution 2

You can use ... spread operator inside this.setState:

var obj =  {
        "2019-01-02":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        },
        "2019-01-04":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        },
        "2019-01-08":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        },
        "2018-12-29":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        },
        "2018-11-27":{
            "disabled":true,"selected":true,"selectedColor":"#fc3232"
        },
    }
    
        console.log(obj)
    
    var s = {...obj, 
        "2018-12-30":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
        }
    }
    
    console.log(s)

In React you can do this by:

this.setState({ marked: {...this.state.marked, "2018-12-30":{
            "disabled":true,"selected":true,"selectedColor":"#10cc74"
}})

Solution 3

This is how I would do it in react. Keep your whole state and update the marked with new values using setState.

Just provide values to the handleMarked function to update the state. And delete dummy values for day and value.

constructor(props) {
  super(props);
  this.state = {
    marked: {},
    tempMarkedDates: [],
  }
  this.toggle = this.toggle.bind(this);
}

handleMarked = (day, value) => {

  /* Provide values to function params above and delete dummy values below */
  day = '2019-01-10';
  value = {
    disabled: true,
    selected: true,
    selectedColor: '#fc3232'
  }

  this.setState({
    ...this.state,
    marked: {
      ...this.state.marked,
      [day]: value
    }
  },
    () => console.log(JSON.stringify(this.state.marked))
  );
}

Comments

[Kirankumar Dafda]

Thanks @HarishSoni, can you tell me if How do I update this into state ? Something like var s = { ...this.state.marked, obj}; this.setState({ marked: s}); Is this right ?

[Harish Soni]

yeah that would work. Let me know if your issue is resolved. Please mark it as answer if it does and give it a upvote to my effort

[Harish Soni]

Thanks in ADAVANCE:

[Harish Soni]

Did you got the result as desired?

[Kirankumar Dafda]

No, I am still not getting the response I want

[Harish Soni]

let me know the desired result you want

[Kirankumar Dafda]

Hello Ashok, this removes my old value from the state

[Ashok Gujjar]

You need to set state after the value gets change. Looked at my updated answer

[Kirankumar Dafda]

Updated my question

[Kirankumar Dafda]

var s = Object.assign(obj , this.state.marked[0]); this.setState({ marked: s }) this clears my old values in marked state

[Harish Soni]

You are setting the state after spreading right. So it should do the Trick. What you are getting then?

[Ashok Gujjar]

Have you changed anything that is described in your question? Bcz based on your code, this might get work.

[Kirankumar Dafda]

No, I haven't changed anything

[Kirankumar Dafda]

Everything was ok with your code just remove, 0 index from marked[0] and it worked for me

[Oliver D]

hello @HarishSoni can u explain to me this whats mean obj={{...this.state.userLocation, ...this.state.region}}?