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

javascript merge objects without overwriting
merge array of objects into one object
react update state array of objects
react concatenate string and component
javascript merge array of objects
merge two json objects javascript
javascript merge array of objects by key
react hooks update array of objects

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.

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

How to merge two objects in JavaScript, Find out how to merge 2 JavaScript objects and create a new object that spread operator, which is the perfect way to merge two simple objects into one: and check out my premium React/Vue/Svelte/Node/Next.js courses! Contents in this project Combine Two Strings Into One Using concat () Function : 1. Import StyleSheet, Text, View and Button component in your project. import React, { Component } from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; 1. 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)

Merge Object Properties with the Spread Operator, Home; Main Content with Babel and React: merging multiple objects' properties into one object! Wrap any objects you'd like merged into one with braces ( {} ): Also note that you can provide any number of objects to merge: You can find a real example here: https://davidwalsh.name/react-state. React Native - App; React Native - State; React Native - Props; React Native - Styling; React Native - Flexbox; React Native - ListView; React Native - Text Input; React Native - ScrollView; React Native - Images; React Native - HTTP; React Native - Buttons; React Native - Animations; React Native - Debugging; React Native - Router; React Native - Running IOS

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 to Add to an Array in React State using Hooks, The question is how do I add an item to the array in React State? The reason .​concat() works to update state is that .concat() creates a new “For two arrays of the same size, the only way to know if they are equal is by comparing each element. The most simple solution is to use immutable objects. Using.concat()or the spread operator …duplicates the state into a new array, which we pass to React as the updated state. React does not have to update the state and re-render the screen until it

React Native Combine Two Strings Into One Using concat() Function, import { StyleSheet, Text, View, Button } from 'react-native';. 2. Create constructor​() in your main class and define a state named as SampleText. Hi, I\'m using BOXI 3.1 WebI and have a need to show multiple values of a column in a comma delimited list. I tried using a horizontal table but if the list goes over the right margin it creates a new page instead of wrapping to the next line like w

Merge two objects in react, Concat( ) method. JS objects in your Smart Components. Select an Empty MVC application with Web API enabled as shown in the Passing Multiple Objects to  One of the most important difference between the solutions, is that some methods doesn't mutate the original array (i.e. spread operator, or concat function) but the other mutate the original array (i.e. push).

Immutability Helpers – React, You can also take a look at Facebook's Immutable-js and the Advanced of myData with the new one in shouldComponentUpdate() using triple-equals: {$​merge: object} merge the keys of object with the target. State and Lifecycle · 6. You will notice that, not only both a and b get updated by clicking the button, in the console, there is only one "render" printed out. What if you have an object in the state, and want to update different properties of the object, does it still work the same way? Let’s see how we are going to update an object in setState. Imagine we have an

Comments
  • Hello Ashok, this removes my old value from the state
  • You need to set state after the value gets change. Looked at my updated answer
  • var s = Object.assign(obj , this.state.marked[0]); this.setState({ marked: s }) this clears my old values in marked state
  • Have you changed anything that is described in your question? Bcz based on your code, this might get work.
  • No, I haven't changed anything
  • 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 ?
  • 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
  • Thanks in ADAVANCE:
  • Did you got the result as desired?
  • No, I am still not getting the response I want