React Hooks update nested JSON array by index - arrays

Question

I have this JSON object and I want to change an attribute inside it. In this case I'm trying to change VALUE inside configs[0].configs[0].value
{
"id": "PAY_TOOL_1",
"name": "PAY_TOOL_1",
"description": "PayTool1",
"state": "ENABLED",
"configs": [
{
"isDefaultConfig": null,
"id": "configId-1",
"name": "configId-1",
"defaultConfig": null,
"description": null,
"configs": [
{
"isEditable": true,
"identifier": null,
"name": "returnUrl",
"value": "http://localhost:7070/pay/payment/confirm/", <-- WANT TO CHANGE THIS
"defaultValue": null,
"description": null,
"editable": true
},
{
"isEditable": true,
"identifier": null,
"name": "cancelUrl",
"value": "http://localhost:7070/pay/payment/cancel/",
"defaultValue": null,
"description": null,
"editable": true
}
]
},
{
"isDefaultConfig": null,
"id": "configId-2",
"name": "configId-2",
"defaultConfig": null,
"description": null,
"configs": [
{
"isEditable": true,
"identifier": null,
"name": "returnUrl2",
"value": "http://localhost:7070/pay/payment/confirm/22",
"defaultValue": null,
"description": null,
"editable": true
},
{
"isEditable": true,
"identifier": null,
"name": "cancelUrl2",
"value": "http://localhost:7070/pay/payment/cancel/22",
"defaultValue": null,
"description": null,
"editable": true
}
]
}
]
}
This is the code in REACT HOOKS following this solution
SOLUTION
const [editPaymentTool, setEditPaymentTool] = useState(null);
function handleConfigurationInputs( configIndex, propertyIndex, configId, attributeName, attributeValue) {
console.log("CONFIG_INDEX: "+configIndex+" PROPERTY_INDEX: "+propertyIndex+" CONFIG ID: "+configId+ " NAME: "+attributeName+ " VALUE: "+attributeValue);
console.log(editPaymentTool);
setEditPaymentTool(prev => ({
...prev,
configs:[{
...prev.configs,
configs:[{
...prev.configs[configIndex].configs[propertyIndex],
value:attributeValue
}]
}]
}));
}
and the output produced which is pretty different from the expected above
{
"id": "PAY_TOOL_1",
"name": "PAY_TOOL_1",
"description": "PayTool1",
"state": "ENABLED",
"configs": [
{
"0": {
"isDefaultConfig": null,
"id": "configId-1",
"name": "configId-1",
"defaultConfig": null,
"description": null,
"configs": [
{
"isEditable": true,
"identifier": null,
"name": "returnUrl",
"value": "http://localhost:7070/pay/payment/confirm/", <-- EXPECTED TO BE CHANGED BUT NOT
"defaultValue": null,
"description": null,
"editable": true
},
{
"isEditable": true,
"identifier": null,
"name": "cancelUrl",
"value": "http://localhost:7070/pay/payment/cancel/",
"defaultValue": null,
"description": null,
"editable": true
}
]
},
"1": {
"isDefaultConfig": null,
"id": "configId-2",
"name": "configId-2",
"defaultConfig": null,
"description": null,
"configs": [
{
"isEditable": true,
"identifier": null,
"name": "returnUrl2",
"value": "http://localhost:7070/pay/payment/confirm/22",
"defaultValue": null,
"description": null,
"editable": true
},
{
"isEditable": true,
"identifier": null,
"name": "cancelUrl2",
"value": "http://localhost:7070/pay/payment/cancel/22",
"defaultValue": null,
"description": null,
"editable": true
}
]
},
"configs": [
{
"isEditable": true,
"identifier": null,
"name": "returnUrl",
"value": "http://localhost:7070/pay/payment/confirm/l", <-- THE CHANGED VALUE IS PUT HERE (WRONG)
"defaultValue": null,
"description": null,
"editable": true
}
]
}
]
}
Any help is appreciated

Answer 1

Try this:
newState = _.cloneDeep(editPaymentTool);
newState.configs[0].configs[0].value = newValue;
//more complicated nested updates
...
setEditPaymentTool(newState);