React Typescript parsing formData in required format-CodePudding

I'm new to React and Typescript and I have an editable table with the below default values which can be updated(edited) and submitted.

This is the original and expected data format (parameters), the parameters fields and values are tied w.r.t to the paramOrder which acts as an ID.

const parameters = {
paramList: [
      {
        paramOrder: 0,
        paramInput: {
          param: [
            {
              field: "PRODUCT_TYPE",
              value: '"BT"'
            },
          ]
        },
        paramOutput: {
          param: [
            {
              field: "INCREMENTAL_EXPENSES",
              value: "0.0028"
            },
          ]
        },
        status: "Draft"
      },
      {
        paramOrder: 1,
        paramInput: {
          param: [
            {
              field: "PRODUCT_TYPE",
              value: '"BT"'
            },
          ]
        },
        paramOutput: {
          param: [
            {
              field: "INCREMENTAL_EXPENSES",
              value: "0.0028"
            },
          ]
        },
        status: "Draft"
      },
    ]
  };

I'm using the form control to handle the fields change and combined the fields name (Something like "0|PRODUCT_TYPE" : "ABC") later split them to an array of objects.

const setParam = (formData, parameters) => {
const objArray = Object.keys(formData).map(key => {
  const [paramOrder, field] = key.split('|');
  return {
   paramOrder,
   field,
   value: formData[key],
   };
 });
return objArray;
};

This is the current format I'm getting after handling the changes using the previous code, however the paramOrder is repetitive which needs to be combined as one and the fields and value must be added as it's object like the above format.

[
    {
        "paramOrder": "0",
        "field": "PRODUCT_TYPE",
        "value": "ABC",
    },
    {
        "paramOrder": "0",
        "field": "INCREMENTAL_EXPENSES",
        "value": "12",
    },
    {
        "paramOrder": "1",
        "field": "PRODUCT_TYPE",
        "value": "BT",
    },
    {
        "paramOrder": "1",
        "field": "INCREMENTAL_EXPENSES",
        "value": "0.5",
    },
]

I want these above updated values to be mapped to the original data format and just the values replaced based on the paramOrder and the respective values to the given field (i.e., PRODUCT_TYPE, etc.).

Here is the codesandbox Link - https://codesandbox.io/s/react-typescript-forked-qrx380?file=/src/ParameterTable.tsx

Please let me know if you need any additional details, thanks for the help!!

CodePudding user response：

I defined some types:

interface Param {
  paramOrder: number;
  paramInput: {
    param: { field: string; value: string }[];
  };
  paramOutput: {
    param: { field: string; value: string }[];
  };
  status: string;
}

type Params = { paramList: Param[] };

And here's code:

const updateParams = (
  data: Record<string, string>, // formData
  params: Params // old parameters
) => Object.entries(data).reduce(updateField, params);

// this function updates one field and returns new Params object
function updateField(
  { paramList }: Params,
  [key, newValue]: [string, string]
): Params {
  const [paramOrder, fieldToUpdate] = key.split("|");
  return {
    paramList: [ // here we define new paramList
      ...paramList.map((param) =>
        // if param.paramOrder matches paramOrder of the field we
        // want to update, return new Param with updated field,
        // otherwise return old Param
        param.paramOrder === parseInt(paramOrder)
          ? {
              paramOrder: param.paramOrder,
              paramInput: {
                param: param.paramInput.param.map(({ field, value }) =>
                  field === fieldToUpdate
                    ? { field, value: newValue }
                    : { field, value }
                )
              },
              paramOutput: {
                param: param.paramOutput.param.map(({ field, value }) =>
                  field === fieldToUpdate
                    ? { field, value: newValue }
                    : { field, value }
                )
              },
              status: param.status
            }
          : param
      )
    ]
  };
}