How to update the specific element in JSON data with setState in React

[spvjebaraj]

Hi,

I am working in React with TypeScript. I am using the below JSON format to build the tree structure to display the content as folder. I stored the below JSON data in state object as treeViewData.

{
  "path": "Parent Site",
  "name": "Parent Site",
  "type": "directory",
  "isRoot": true,
  "children": [
    {
      "path": "Parent Site/Sub Site 1",
      "name": "Sub Site 1",
      "type": "directory",
      "children": [
        {
          "path": "Parent Site/Sub Site 1/Documents",
          "name": "Documents",
          "type": "directory",
          "children": []
        },
        {
          "path": "Parent Site/Sub Site 1/My Documents",
          "name": "Documents",
          "type": "directory",
          "children": [
            {
              "path": "Parent Site/Sub Site 1/My Documents/Folder1",
              "name": "Folder1",
              "type": "directory”,
"children": []
            },
            {
              "path": "Parent Site/Sub Site 1/My Documents/Folder2",
              "name": "Folder2",
              "type": "directory”,
"children": []
            }
          ]
        },
        {
          "path": "Parent Site/Sub Site 1/My New Documents",
          "name": "Documents",
          "type": "directory",
          "children": []
        }
      ]
    },
    {
      "path": "Parent Site/Sub Site 2",
      "name": "Sub Site 2",
      "type": "directory",
      "children": [
        {
          "path": "Parent Site/Sub Site 2/Documents",
          "name": "Documents",
          "type": "directory",
          "children": [
            {
              "path": "Parent Site/Sub Site 2/Documents/Folder1",
              "name": "Folder1",
              "type": "directory”,
"children": []
            },
            {
              "path": "Parent Site/Sub Site 2/Documents/Folder2",
              "name": "Folder2",
              "type": "directory”,
"children": []
            },
            {
              "path": "Parent Site/Sub Site 2/Documents/Folder3",
              "name": "Folder3",
              "type": "directory",
              "children": []
            }
          ]
        }
      ]
    }
  ]
}

From the above JSON data, I want to insert new set of properties in the Children object. Let us consider the below child which is resided in the Parent Site/Sub Site 2.

"path": "Parent Site/Sub Site 2/Documents/Folder1",

In this current node, Children array is empty. I want to insert new set of four properties to be added like below.

 "path": "Parent Site/Sub Site 2/Documents/Folder1/Inside New Folder",
 "name": "Inside New Folder",
"type": "directory”,
"children":[]

How to do this in React? How to perform the setState operation of this scenario? Please help me.

Thanks
Philip

[johnjayasingh]

Split these values into individual components Each child in an array in a component and when changes update the particular tree with reference of index/unique property.
This is a general JSON problem.

If the data is deterministic then store the data in a database like elastic search and do frequent updates from the frontend. But either way, you will need to split into components for easier update.

A javascript solution will make the code ugly and unreadable

[adesh-thetaonelab]

did you get any solution ?? I am facing same issue

[spvjebaraj]

I got the solution and updated the code with an index and recursive function.

[adesh-thetaonelab]

loadData = async () => {
const { ok, message, json, schema, total } = await fetchUtil(
"POST",
"/fetch_compliances_level_three",
{
log_id: this.props.levelTwoClickedData.log_id,
due_date: this.props.levelTwoClickedData.due_date,
group_name: this.props.levelTwoClickedData.group_name!,
is_summarize: this.state.summarize_b2cs,
}
);
if (!ok) {
notification.error({ message });
this.setState({
apiState: "error",
rowData: [],
});
} else {
if (!json) {
this.setState({ rowData: [], apiState: "success" });
return;
}
const datastring = JSON.stringify(json);
const data = addLevel(JSON.parse(datastring));

  this.setState({
    conflicts: total.conflicts,
  });

  this.setState({ reconciled: total.reconciliation_status });
  this.setColumnDef(schema);
  this.setState(
    {
      rowData: data,
      apiState: "success",
      rowDataString: datastring,
    },
    () => {
      data.forEach((el) => {
        // if (
        //  (el.type === "GST input (ITC)" ||
        //   el.type==="Tax collected at source (TCS)")||
        //   el.type === "Outward supplies & reverse charges"
        // ) {
        if (el.type === "GST input (ITC)") {
          const inputTax = +el.cgst_sgst! + +el.igst! + +el.cess!;
          this.setState({
            inputTaxSum: inputTax,
          });
        }
        if (el.type === "Credit notes") {
          const cnTax = +el.cgst_sgst! + +el.igst! + +el.cess!;
          this.setState({
            creditNoteSum: cnTax,
          });
        }
        if (el.type === "Debit notes") {
          const dnTax = +el.cgst_sgst! + +el.igst! + +el.cess!;
          this.setState({
            debitNoteSum: dnTax,
          });
        }
        if (el.type === "Outward supplies & reverse charges") {
          const outputTax = +el.cgst_sgst! + +el.igst! + +el.cess!;
          this.setState({
            outputTaxSum: outputTax,
          });
        }
        if (el.type === "Credit note by supplier") {
          const cnSTax = +el.cgst_sgst! + +el.igst! + +el.cess!;
          this.setState({
            cnFromSupplier: cnSTax,
          });
        }
        if (el.type === "Debit note by supplier") {
          const dnSTax = +el.cgst_sgst! + +el.igst! + +el.cess!;
          this.setState({
            dnFromSupplier: dnSTax,
          });
        }
        if (el.type === "Tax collected at source (TCS)") {
          const tcs = +el.cgst_sgst! + +el.igst! + +el.cess!;
          this.setState({
            tcsCredit: tcs,
          });
        }
        // }
      });
    }
  );
  let isPertialOrNoMatchAvailable = false;
  data.forEach((el: any) => {
    el.children?.forEach((item: any) => {
      if (
        item.reconciliation_status_description === "NOT_MATCH" ||
        item.reconciliation_status_description === "PERTIAL_MATCH"
      ) {
        isPertialOrNoMatchAvailable = true;
      }
    });
  });
  this.setState({
    isPertialOrNoMatchAvailable,
  });
}

};

componentDidUpdate(prevProps: Props, prevState: State) {
if (this.state.summarize_b2cs !== prevState.summarize_b2cs) {
this.loadData();
}
if (this.state.rowData !== prevState.rowData) {

  const newData = this.state.rowData;
  const element = document.getElementById("rowData") as HTMLElement;
  if (element !== null) {
    element.innerHTML = JSON.stringify(newData);
  }
}

}

on this.state.summarize_b2cs change how should i re-render the whole page ?

sorry for asking such a big question