getFieldsWithDynamicData

This utility function processes a configuration of form fields and dynamically updates specific fields based on provided dynamic data.

Function Definition

export const getFieldsWithDynamicData = (
  fieldsConfig: TFormField[],
  dynamicData: { name: string; [key: string]: any }[]
): TFormField[] => { ... }

Parameters

Name	Type	Description
fieldsConfig	TFormField[]	An array of form field configurations. Each field includes a type, name, and other optional properties depending on the field type.
dynamicData	{ name: string; [key: string]: any }[]	An array of dynamic data objects where each object contains a name property and other key-value pairs to dynamically update matching fields in fieldsConfig.

Returns

TFormField[] — The processed form field configuration with dynamic updates applied.

---

Usage Example

import { getFieldsWithDynamicData } from './utils'


const FIELDS_CONFIG = [
  {
    type: 'input',
    data: { name: 'projectName', placeholder: 'Enter project name' }
  },
  {
    type: 'checkboxes',
    data: {
      fields: [
        { name: 'option1', label: 'Option 1' },
        { name: 'option2', label: 'Option 2' }
      ]
    }
  }
]

const DYNAMIC_DATA = [
  {
    name: 'projectName',
    placeholder: 'Dynamic placeholder'
  }
]

...

const updatedFields = getFieldsWithDynamicData(FIELDS_CONFIG, DYNAMIC_DATA)

console.log(updatedFields)
// Result:
// [
//   {
//     type: 'input',
//     data: { name: 'projectName', placeholder: 'Dynamic placeholder' }
//   },
//   {
//     type: 'checkboxes',
//     data: {
//       fields: [
//         { name: 'option1', label: 'Option 1' },
//         { name: 'option2', label: 'Option 2' }
//       ]
//     }
//   }
// ];

return (
  <Form fields={updatedFields} />
)

---

Detailed Processing

Supported Field Types

• input, masked-input, select, multiselect, password, textarea, datepicker, switch
  • Updates the field if its data.name matches an entry in dynamicData.
• checkboxes, radio
  • Iterates over data.fields and updates subfields matching dynamicData.
• inline-fields
  • Recursively processes nested inline fields.
• date-range, jsx-tag
  • These field types are skipped as they don't require dynamic updates.

---

Notes

• The function ensures immutability by creating shallow copies of objects during processing.
• Use this utility when you need to inject or override specific properties of form fields dynamically based on external data.