Update state dynamically with nested levels of objects and array

user_15391391 0
Viewed 219

This is the problem

I'm trying to update the state of this object called singleCarers

I have the index of the roster in the rosters array i need to update

but the The key monday: needs to be dynamic & the key start: & finish: also needs to dynamic

const indexOfRoster = index;

const dayOfRoster = day;

const { value, name } = e.target;  // name represents either start: or finish: & value is the value of start or finish eg. name:value === start: "09:10"




{
  "rosters": [
    {
       
        "schedule": {

            "monday": {

                "start": "",
                "finish": "",

            },
        },

    },
]
}
reactjs state javascript
2 Answers

You have two problems:

  1. You need reference the object using Computed property names
  2. using a callback in set state requires you to return a new state from the function.
setSingleCarers((prevState) => {
  const updatedRosters = prevState.rosters.map((roster, index) => (
    index === indexOfRoster
      ? {  // update the target roster
          ...roster,
          schedule: {
            ...roster.schedule,
            [dayOfRoster]: {
              ...roster.schedule[dayOfRoster],
              [name]: value,
            },
          },
        }
      : roster,
  ));

  return {  // return the new State
    ...prevState,
    rosters: updatedRosters,
  };
}

this may seem excessive in which case you can look into solutions like immer or other libraries that make this sort of object manipulation easier instead of having to remember to do deep object copying

user_29676970

Do not over think it, if you don't use complex data types this is the best option

JSON.parse(JSON.stringify(object))

const auxState = JSON.parse (JSON.stringify(reactState))

// now modify auxState
auxState[index][day]={
 start:"val",
 end:"val"
}

setReactState(auxState)

If you want to get fancy

function clone(obj) {
    if (obj === null || typeof (obj) !== 'object' || 'isActiveClone' in obj)
        return obj;

    if (obj instanceof Date)
        var temp = new obj.constructor(); //or new Date(obj);
    else
        var temp = obj.constructor();

    for (var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
            obj['isActiveClone'] = null;
            temp[key] = clone(obj[key]);
            delete obj['isActiveClone'];
        }
    }
    return temp;
}

const auxState = clone(reactState)
// Modify auxState

setReactState (auxState)
user_169330730
Related