This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

React Dynamic Form

<DynamicForm className="form"
  title="Dynamic From"
  defaultValues={this.state.defaultValues}
  schema={this.state.schema}
  onSubmit={(model) => { this.onSubmit(model) }}>
</DynamicForm>

Pass form schema (json structure) as below.

{
    "productName": {
        "label": "Product Name",
        "key": "productName",
        "type": "text",
        "props": {
            "required": true,
            "name": "product_name_kk",
            "size": "45",
            "maxLength": 15
        }
    },
    "price": {
        "label": "Price",
        "key": "price",
        "type": "number",
        "props": {
            "required": true,
            "size": "45",
            "name": "product_price",
            "maxLength": 60
        }
    },
    "merchandiserEmail": {
        "label": "Merchandiser Email",
        "key": "merchandiserEmail",
        "type": "email",
        "props": {
            "required": true,
            "size": "45",
            "name": "merchant_email",
            "maxLength": 60,
            "email": "true"
        }
    },
    "availablityStatus": {
        "label": "Availablity Status",
        "key": "availablityStatus",
        "type": "radio",
        "options": [
            {
                "key": "yes",
                "label": "No",
                "name": "status",
                "value": "no"
            },
            {
                "key": "no",
                "label": "Yes",
                "name": "status",
                "value": "yes"
            }
        ],
        "props": {
            "required": true,
            "name": "avail_status"
        }
    },
    "discountDays": {
        "label": "Discount Days",
        "key": "discountDays",
        "type": "checkbox",
        "options": [
            {
                "key": "sunday",
                "label": "Sunday",
                "value": "sunday"
            },
            {
                "key": "monday",
                "label": "Monday",
                "value": "monday"
            },
            {
                "key": "others",
                "label": "Other Days",
                "value": "others"
            }
        ],
        "props": {
            "name": "avail_days"
        }
    },
    "colors": {
        "label": "Colors",
        "key": "colors",
        "type": "select",
        "options": [
            {
                "key": "gray",
                "label": "Gray",
                "value": "#cccccc"
            },
            {
                "key": "white",
                "label": "White",
                "value": "#ffffff"
            },
            {
                "key": "black",
                "label": "Black",
                "value": "#000000"
            }
        ],
        "props": {
            "required": true,
            "name": "colors"
        }
    },
    "availableDate": {
        "label": "Available Date",
        "type": "datetime",
        "key": "availableDate",
        "props": {
            "required": true,
            "name": "available_date"
        },
        "validations": {
            "validateAvailableDate":{
                "args": {
                    "from": "2018/9/6 19:25:48"
                },
                "error": "Fix the selected date"
            }
        }
    },
    "description": {
        "label": "Description",
        "key": "description",
        "type": "textarea",
        "props": {
            "required": true,
            "name": "description",
            "rows": 10,
            "cols": 50,
            "maxLength": 600
        }
    },
    "image": {
        "label": "Image",
        "key": "image",
        "type": "file",
        "props": {
            "name": "image",
            "multiple": true
        },
        "validations": {
            "validateFileType":{
                "args": { 
                    "filetypes": ["png", "jpg", "jpeg"] 
                },
                "error": "File type not supported"
            }
        }
    }    
}