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": "",
},
},
},
]
}
You have two problems:
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
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)