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.

Ashok Gujjar · Accepted Answer · 2018-12-28T13:43:23.027

3

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 });

edited Dec 28 '18 at 13:43

answered Dec 28 '18 at 13:39

Ashok Gujjar

441
5
21

Hello Ashok, this removes my old value from the state – Kirankumar Dafda Dec 28 '18 at 13:41
You need to set state after the value gets change. Looked at my updated answer – Ashok Gujjar Dec 28 '18 at 13:44
`var s = Object.assign(obj , this.state.marked[0]); this.setState({ marked: s })` this clears my old values in marked state – Kirankumar Dafda Dec 28 '18 at 13:45
Have you changed anything that is described in your question? Bcz based on your code, this might get work. – Ashok Gujjar Dec 28 '18 at 13:47
No, I haven't changed anything – Kirankumar Dafda Dec 28 '18 at 13:48
Everything was ok with your code just remove, 0 index from `marked[0]` and it worked for me – Kirankumar Dafda Dec 28 '18 at 13:50

score 2 · Answer 2 · answered Dec 28 '18 at 13:20

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"
}})

answered Dec 28 '18 at 13:20

Harish Soni

1,796
12
27

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 ? – Kirankumar Dafda Dec 28 '18 at 13:22
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 Dec 28 '18 at 13:25
Thanks in ADAVANCE: – Harish Soni Dec 28 '18 at 13:25
Did you got the result as desired? – Harish Soni Dec 28 '18 at 13:33
No, I am still not getting the response I want – Kirankumar Dafda Dec 28 '18 at 13:39
let me know the desired result you want – Harish Soni Dec 28 '18 at 13:40
Updated my question – Kirankumar Dafda Dec 28 '18 at 13:44
You are setting the state after spreading right. So it should do the Trick. What you are getting then? – Harish Soni Dec 28 '18 at 13:46
hello @HarishSoni can u explain to me this whats mean `obj={{...this.state.userLocation, ...this.state.region}}`? – Oliver D Dec 28 '19 at 09:59

Nikola · Answer 3 · 2018-12-29T09:44:55.837

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))
  );
}

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

3 Answers3