dynamicFieldJson

{
  "panel": {
    "columns": [
      {
        "rows": [
          {
            "components": [
              {
                "type": "Label",
                "label": "Label 1",
                "defaultValue": "Default Value 1"
              },
              {
                "type": "InputField",
                "label": "Input Field 1",
                "defaultValue": ""
              }
            ]
          },
          {
            "components": [
              {
                "type": "Dropdown",
                "label": "Dropdown Field 1",
                "options": ["Option 1", "Option 2", "Option 3"],
                "defaultValue": "Option 1"
              }
            ]
          }
        ]
      },
      {
        "rows": [
          {
            "components": [
              {
                "type": "Label",
                "label": "Label 2",
                "defaultValue": "Default Value 2"
              },
              {
                "type": "InputField",
                "label": "Input Field 2",
                "defaultValue": ""
              }
            ]
          },
          {
            "components": [
              {
                "type": "Dropdown",
                "label": "Dropdown Field 2",
                "options": ["Option 1", "Option 2", "Option 3"],
                "defaultValue": "Option 1"
              }
            ]
          }
        ]
      },
      {
        "rows": [
          {
            "components": [
              {
                "type": "Label",
                "label": "Label 3",
                "defaultValue": "Default Value 3"
              },
              {
                "type": "InputField",
                "label": "Input Field 3",
                "defaultValue": ""
              }
            ]
          },
          {
            "components": [
              {
                "type": "Dropdown",
                "label": "Dropdown Field 3",
                "options": ["Option 1", "Option 2", "Option 3"],
                "defaultValue": "Option 1"
              }
            ]
          }
        ]
      }
    ]
  }
}

import React from 'react';

function Panel(props) {
const { columns } = props.data.panel;

return (

{columns.map((column, columnIndex) => (

{column.rows.map((row, rowIndex) => (
<div className="row" key={${columnIndex}-${rowIndex}}>
{row.components.map((component, componentIndex) => {
switch (component.type) {
case 'Label':
return (
<div className="label" key={${columnIndex}-${rowIndex}-${componentIndex}}>
{component.label}

);
case 'InputField':
return (
<div className="input-field" key={${columnIndex}-${rowIndex}-${componentIndex}}>
{component.label}

);
case 'Dropdown':
return (
<div className="dropdown" key={${columnIndex}-${rowIndex}-${componentIndex}}>
{component.label}
{component.options.map((option, optionIndex) => ( <option key={${columnIndex}-${rowIndex}-${componentIndex}-${optionIndex}}> {option} ))}

);
default:
return null;
}
})}

))}

))}

);
}

export default Panel;