Este es el problema
Estoy tratando de actualizar el estado de este objeto llamado singleCarers
Tengo el índice de la lista en la matriz de listas que necesito actualizar
pero The key Monday: necesita ser dinámico & the key start: & finish: también necesita ser dinámico
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": "", }, }, }, ] }Tienes dos problemas:
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, }; } esto puede parecer excesivo, en cuyo caso puede buscar soluciones como immer u otras bibliotecas que facilitan este tipo de manipulación de objetos en lugar de tener que recordar hacer una copia profunda de objetos
No lo pienses más, si no usas tipos de datos complejos esta es la mejor opción
JSON.parse(JSON.stringify(object))
const auxState = JSON.parse (JSON.stringify(reactState)) // now modify auxState auxState[index][day]={ start:"val", end:"val" } setReactState(auxState)Si quieres ponerte elegante
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)