JSFiddle - React, Tailwind, and code Playground

by veer712

JavaScript

import React from 'react';
import Textarea from '../form-elements/textarea';
import Select from '../form-elements/select';
import Textbox from '../form-elements/textbox';
import RadioGroup from '../form-elements/radio-group';
import CheckboxGroup from '../form-elements/checkbox-group';
import Datepicker from '../form-elements/datepicker';


class Form extends React.Component {

  state = {
    formData: {}
  }

  handleChange = e => {
    this.setState({...this.state, formData:{...this.state.formData, [e.target.name]:e.target.value}});
  }

  fieldMap = (fieldConfig, index) => {
    let field = "";
    switch (fieldConfig.code) {
      case "TextBox":
        field = (<Textbox 
          key={index}
          formField={fieldConfig}
          handleChange={this.handleChange} />);
        break;
      case "ListBox":
        field = (<Select 
          key={index}
          formField={fieldConfig}
          handleChange={this.handleChange} />);
        break;
      case "TextArea":
        field = (<Textarea 
          key={index}
          formField={fieldConfig}
          handleChange={this.handleChange}  />);
        break;
      case "RadioGroup":
        field = (<RadioGroup 
          key={index}
          formField={fieldConfig}
          value={''}
          handleChange={this.handleChange}  />);
        break;
      case "CheckBox":
        field = (<CheckboxGroup 
          key={index}
          formField={fieldConfig}
          handleChange={this.handleChange}  />);
        break;
      case "DatePicker":
          field = (<Datepicker 
            key={index}
            formField={fieldConfig}
            handleChange={this.handleChange}  />);
          break;
    }
    return field;
  };

  initializeFormFields = () => {
    const { fields } = this.props.formConfig;
    const formData = {};
    fields.forEach(field => formData[field.name]=field.defaultValue);
    this.setState({formData});
  }

  componentDidMount() {
    console.log('ww');
   ...