CODEWITHSUNDEEP
reactjsreact-native
Kirankumar Dafda
Kirankumar Dafda

Reputation: 2384

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

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.

Upvotes: 1

Views: 14945

Answers (3)

Nikola
Nikola

Reputation: 1011

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

Upvotes: 1

Ashok Gujjar
Ashok Gujjar

Reputation: 441

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

Upvotes: 3

Harish Soni
Harish Soni

Reputation: 1896

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

Upvotes: 2

Related Questions