REACT: Updating nested state

Question

I have two sets of data. Both are saved in a states.I want to update the rowsData inside the data1 state based on the values in data2 state. The "row" value in the data2 object refers to the "id" of rowsData in the data1 state and columns in the data2 refers to any data beside id in the rowsData object in data1. I want to pick "row" and "column" from data2 and cahnge the respective data inside rowsData in data1.

let tableData = {
 columnsDef: [
   { title: "id",field: "id",className: "header-style" },
   { title: "First_name", field: "First_name", className: "header-style" },
   { title: "Last_name", field: "Last_name", className: "header-style" },
   { title: "Email", field: "Email", className: "header-style" },
 ],

rowsData:[
   { id: "1", First_name: "Donald", Last_name: "OConnell", Email: "DOCONNEL" },
   { id: "2", First_name: "Douglas", Last_name: "Grant", Email: "DGRANT" },
   { id: "3", First_name: "Jennifer", Last_name: "Whalen", Email: "JWHALEN" },
   { id: "4", First_name: "Michael", Last_name: "Hartstein", Email: "MHARTSTE" },
   { id: "5", First_name: "Pat", Last_name: "Fay", Email: "PFAY" },
   { id: "6", First_name: "Susan", Last_name: "Mavris", Email: "SMAVRIS" },
   { id: "7", First_name: "Hermann", Last_name: "Baer", Email: "HBAER" }
 ],

file: [
   { file: { path: "dummy_data_3 .csv"}}
 ],
}


let updatedTableData = [
    { "row": 2, "column": "Email", "oldValue": "DGRANT", "newValue": "DGRANT UPDATED" },
    { "row": 6, "column": "First_name", "oldValue": "Susan", "newValue": "SUSAN UPDATED" },
    { "row": 4, "column": "Last_name", "oldValue": "Hartstein", "newValue": "Hartstein UPDATED" }
]

const [data1, setData1] = useState(tableData)
const [data2, setData2] = useState(updatedTableData)

Here is the codesandbox link for the issue.

https://codesandbox.io/s/reverent-firefly-r87huj?file=/src/App.js

Answer 1

You can follow these steps for updating data1 from handleAppyChanges function:

1. Create a copy of rowsData:

   const td = [...data1.rowsData];
   

2. Iterate over data2 and find related item, then update its related column:

   data2.forEach((item) => {
        let row = data1.rowsData.find((r) => r.id === item.row);
        if (row) {
          let index = data1.rowsData.findIndex((v) => v === row);
          row[item.column] = item.newValue;
          td[index] = row;
       }
   });
   

3. Update table data via state:

   const newData = {
        file: data1.file,
        rowsData: td,
        columnDef: data1.columnsDef
   };
   setData1(newData);
   

Here's the full function:

const handleAppyChanges = () => {
 const td = [...data1.rowsData];
 data2.forEach((item) => {
    let row = data1.rowsData.find((r) => r.id === item.row);
    if (row) {
       let index = data1.rowsData.findIndex((v) => v === row);
       row[item.column] = item.newValue;
       td[index] = row;
    }
 });
 const newData = {
   file: data1.file,
   rowsData: td,
   columnDef: data1.columnsDef
 };
 setData1(newData);
 console.log("Updated Data 1: ", td);
};

You can access the full code via codesandbox: