Dynamic form validation

export const data = {
     A_FirstName: {
        floatLabelType: 'Auto',
        key: 'FirstName',
        label: 'First Name',
        placeholder: 'First Name',
        type: 'text',
        validation: {
            required: true
        }
    },
    B_LastName: { 
        floatLabelType: 'Auto',
        key: 'LastName',
        label: 'Last Name',
        placeholder: 'Last Name',
        type: 'text',
        validation: {
            required: true
        }
    },
    C_Email_ID: {
        floatLabelType: 'Auto',
        key: 'Email_ID',
        label: 'Mail ID',
        placeholder: 'Email',
        type: 'email',
        validation: {
            required: true
        }
    },
    D_Password: {
        floatLabelType: 'Auto',
        key: 'Password',
        label: 'Password',
        placeholder: 'Password',
        type: 'password',
        validation: {
            required: true
        }
    },
   E_DOB: {
        floatLabelType: 'Auto',
        key: 'DOB',
        label: 'DOB',
        placeholder: 'DOB',
        type: 'date',
        validation: {
            required: true
        },
        width: '250px'
    },
    F_Accept: {
        key: 'Accept',
        label: 'Accept terms and conditions',
        type: 'checkbox',
        validation: {
            required: true
        }
    },
    G_Submit: {
        key: 'Button',
        type: 'submit'
    },
}

// import the Button component
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
// import the CheckBox component
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
// import the DatePicker component
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
// import the TextBox component
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';

export default class DynamicForm extends React.Component<any, any> {
  public objectProps: any;

  constructor(props: any) {
    super(props);
  }

  public onSubmit() {
    alert("Form submitted!!!");
  }

  public renderStatus(element: any) {
    switch (element.type) {
      case 'date':
        return <div>
          <DatePickerComponent
            type={element.type}
            floatLabelType={element.floatLabelType}
            placeholder={element.placeholder}
            width={element.width} />
        </div>
      case 'checkbox':
        return <div id = "checkBox">
          <CheckBoxComponent
            type={element.type}
            label={element.label} />
        </div>
      case 'submit':
        return <ButtonComponent id={element.type}
          type={element.type}> Sign up </ButtonComponent>
      default:
        return <div id="textValue">
          <TextBoxComponent
            type={element.type}
            floatLabelType={element.floatLabelType}
            placeholder={element.placeholder} />
        </div>
    }
  }

  public render() {
    this.objectProps = this.props;
    return (
      Object.keys(this.objectProps.dataObject).map((key, value) => {
      return (
        <div key={key.toString()}>
            <form onSubmit={this.onSubmit} >
              { this.renderStatus(this.objectProps.dataObject[key]) }
            </form>
        </div>
      );
    })
   )
  }
}

import { data } from './data';
import DynamicForm from './dynamicform';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

export default class App extends React.Component<{}, {}> {
    public data : any;

    constructor(props: any) {
        super(props);
        this.data = data;
    }

    public render() {
        return (
            <div className = "wrap">
                <div className= "outerbox">
                    <div className = "formValue">
                        <DynamicForm dataObject = {data} />
                    </div>
                </div>
            </div>
        );
     }
 }

ReactDOM.render(<App />, document.getElementById('element'));