GenericForm.tsx

import * as React from 'react';

type InputType = 'text' | 'tel' | 'email' | 'password' | 'number';
type Input = 'textarea' | 'button' | InputType;

const button = () => <button />;
const textarea = () => <textarea />;
const other = (type: InputType) => React.createElement('input', { type });

const matchInput = (inputString: Input) => {
  switch (inputString) {
    case 'textarea':
      return textarea();
    case 'button':
      return button();
    default:
      return other(inputString);
  }
}; 

export interface InputSpec {
  type: Input;
  className?: string;
  defaultValue?: string;
  placeholder?: string;
}
interface IProps {
  elements: InputSpec[];
}

const GenericForm = ({ elements }: IProps) => (
  <form className="scheduleitem-form">
  {
    elements.map((element, i) => {
      return (
        <div key={i} className="input-wrapper">
          {
            React.createElement(element.type, {value: element.defaultValue || '', className: element.className || '', placeholder: element.placeholder || ''})
          }
        </div>
      )
    })
  }
  </form>
);

export default GenericForm;