I'm currently developing a react application and I've encountered an issue. My goal is to update the state object within my reducer using parameters supplied by the action creator. To simplify, I've created an example in pure JS
Here is how my State Object looks:
const stateObj = {
left: {
data: [{ name: 'Adam', surname: "Test Adam" }]
},
right: {
data: [{ name: 'Tom', surname: 'Test Tom' }]
},
}
The data received by the reducer from the action creator is structured like this:
const id = 0;
const newValue = "Sample new value";
const nameOrAge = 'name';
const leftOrRight = 'right';
Based on these parameters, the result should be a deep copy of the state object with one property changed to name: 'Sample new value':
left: {
data: [{ name: 'Adam', surname: "Test Adam" }]
},
right: {
data: [{ name: 'Sample new value', surname: 'Test Tom' }]
},
}
This is what I have so far - a sample reducer function:
const showModifiedData = (id, newValue, nameOrAge, leftOrRight) => {
// Need help modifying the data array
return {
...stateObj,
[leftOrRight]: {
...stateObj[leftOrRight],
data: // modify the name property based on parameters
}
}
}
I'm having difficulty properly altering the data array. Any assistance would be greatly appreciated.