How to use the @data-driven-forms/react-form-renderer.componentTypes.PLAIN_TEXT function in @data-driven-forms/react-form-renderer

} from './form-fields';
import SubForm from './sub-form';
import Tabs from './tabs';

const mapper = {
  [componentTypes.TEXT_FIELD]: TextField,
  [componentTypes.TEXTAREA_FIELD]: TextareaField,
  [componentTypes.SELECT_COMPONENT]: SelectField,
  [componentTypes.CHECKBOX]: CheckboxGroup,
  [componentTypes.SUB_FORM]: SubForm,
  [componentTypes.RADIO]: Radio,
  [componentTypes.TABS]: Tabs,
  [componentTypes.DATE_PICKER]: DatePickerField,
  [componentTypes.TIME_PICKER]: TimePickerField,
  [componentTypes.SWITCH]: SwitchField,
  [componentTypes.PLAIN_TEXT]: PlainTextField,
};

export default mapper;

{ label: 'Dog', value: '1' },
      { label: 'Cats', value: '2' },
      { label: 'Hamsters', value: '3' },
    ],
  }]},
  variants: [{
    name: 'isDisabled',
    title: 'Disabled',
  }, {
    name: 'label',
    title: 'Label',
    component: 'input',
    value: 'Checkbox',
  }],
}, {
  component: componentTypes.PLAIN_TEXT,
  link: '?component=plain-text',
  linkText: 'Plain Text',
  ContentText: GenericComponentText,
  variants: [{
    name: 'label',
    title: 'Label',
    component: 'textarea',
    value: `Lorem ipsum sem velit. Mauris scelerisque tortor sed lorem dapibus, bibendum scelerisque ligula consequat. Quisque fringilla luctus.
Vestibulum vulputate inceptos himenaeos.`,
  }],
  value: {
    fields: [{
      component: componentTypes.PLAIN_TEXT,
      name: 'plain-text-component',
      label: `Lorem ipsum sem velit. Mauris scelerisque tortor sed lorem dapibus, bibendum scelerisque ligula consequat. Quisque fringilla luctus.
Vestibulum vulputate inceptos himenaeos.`,

import { Select } from './select/select';

const mapper = {
  [componentTypes.TEXT_FIELD]: TextField,
  [componentTypes.TEXTAREA_FIELD]: TextAreaField,
  [componentTypes.SELECT_COMPONENT]: SelectField,
  [componentTypes.CHECKBOX]: CheckboxField,
  [componentTypes.SUB_FORM]: SubForm,
  [componentTypes.RADIO]: RadioField,
  [componentTypes.TABS]: Tabs,
  [componentTypes.DATE_PICKER]: DatePickerField,
  [componentTypes.TIME_PICKER]: TimePickerField,
  [componentTypes.TAG_CONTROL]: props =&gt; <div>Unsupported tag control</div>,
  [componentTypes.WIZARD]: Wizard,
  [componentTypes.SWITCH]: SwitchField,
  [componentTypes.PLAIN_TEXT]: PlainTextField,
};

export default mapper;

export const components = {
  TextField,
  TextAreaField,
  CheckboxField,
  RadioField,
  SelectField,
  DatePickerField,
  TimePickerField,
  SwitchField,
  PlainTextField,
};

}],
}, {
  component: componentTypes.PLAIN_TEXT,
  link: 'plain-text',
  linkText: 'Plain Text',
  ContentText: GenericComponentText,
  variants: [{
    name: 'label',
    title: 'Label',
    component: 'textarea',
    value: `Lorem ipsum sem velit. Mauris scelerisque tortor sed lorem dapibus, bibendum scelerisque ligula consequat. Quisque fringilla luctus.
Vestibulum vulputate inceptos himenaeos.`,
  }],
  value: {
    fields: [{
      component: componentTypes.PLAIN_TEXT,
      name: 'plain-text-component',
      label: `Lorem ipsum sem velit. Mauris scelerisque tortor sed lorem dapibus, bibendum scelerisque ligula consequat. Quisque fringilla luctus.
Vestibulum vulputate inceptos himenaeos.`,
    }],
  },
}, {
  component: componentTypes.WIZARD,
  link: componentTypes.WIZARD,
  linkText: 'Wizard',
  ContentText: WizardText,
  value: {
    fields: [{
      component: componentTypes.WIZARD,
      name: 'wizzard',
      fields: [{
        title: 'Get started with adding source',

{ label: 'Dog', value: '1' },
      { label: 'Cats', value: '2' },
      { label: 'Hamsters', value: '3' },
    ],
  }]},
  variants: [{
    name: 'isDisabled',
    title: 'Disabled',
  }, {
    name: 'label',
    title: 'Label',
    component: 'input',
    value: 'Checkbox',
  }],
}, {
  component: componentTypes.PLAIN_TEXT,
  link: 'plain-text',
  linkText: 'Plain Text',
  ContentText: GenericComponentText,
  variants: [{
    name: 'label',
    title: 'Label',
    component: 'textarea',
    value: `Lorem ipsum sem velit. Mauris scelerisque tortor sed lorem dapibus, bibendum scelerisque ligula consequat. Quisque fringilla luctus.
Vestibulum vulputate inceptos himenaeos.`,
  }],
  value: {
    fields: [{
      component: componentTypes.PLAIN_TEXT,
      name: 'plain-text-component',
      label: `Lorem ipsum sem velit. Mauris scelerisque tortor sed lorem dapibus, bibendum scelerisque ligula consequat. Quisque fringilla luctus.
Vestibulum vulputate inceptos himenaeos.`,

}],
}, {
  component: componentTypes.PLAIN_TEXT,
  link: '?component=plain-text',
  linkText: 'Plain Text',
  ContentText: GenericComponentText,
  variants: [{
    name: 'label',
    title: 'Label',
    component: 'textarea',
    value: `Lorem ipsum sem velit. Mauris scelerisque tortor sed lorem dapibus, bibendum scelerisque ligula consequat. Quisque fringilla luctus.
Vestibulum vulputate inceptos himenaeos.`,
  }],
  value: {
    fields: [{
      component: componentTypes.PLAIN_TEXT,
      name: 'plain-text-component',
      label: `Lorem ipsum sem velit. Mauris scelerisque tortor sed lorem dapibus, bibendum scelerisque ligula consequat. Quisque fringilla luctus.
Vestibulum vulputate inceptos himenaeos.`,
    }],
  },
}, {
  component: componentTypes.WIZARD,
  link: `?component=${componentTypes.WIZARD}`,
  linkText: 'Wizard',
  ContentText: WizardText,
  value: {
    fields: [{
      component: componentTypes.WIZARD,
      name: 'wizzard',
      fields: [{
        title: 'Get started with adding source',

import Wizard from './wizzard/wizzard';
import Select from './select';

const mapper = {
  [componentTypes.TEXT_FIELD]: TextField,
  [componentTypes.TEXTAREA_FIELD]: TextareaField,
  [componentTypes.SELECT_COMPONENT]: SelectField,
  [componentTypes.CHECKBOX]: CheckboxGroup,
  [componentTypes.SUB_FORM]: SubForm,
  [componentTypes.RADIO]: Radio,
  [componentTypes.TABS]: Tabs,
  [componentTypes.DATE_PICKER]: DatePickerField,
  [componentTypes.TIME_PICKER]: props =&gt; <div>time picker</div>,
  [componentTypes.SWITCH]: SwitchField,
  [componentTypes.WIZARD]: Wizard,
  [componentTypes.PLAIN_TEXT]: PlainTextField,
};

export default mapper;

export const components = {
  TextField,
  TextareaField,
  SelectField,
  CheckboxGroup,
  SubForm,
  Radio,
  Tabs,
  DatePickerField,
  SwitchField,
  Wizard,
  PlainTextField,