index.tsx

import { ChangeEvent, createElement, FunctionComponent } from 'react';

import { Input, TextArea } from './elements';

type Props = {
  block?: boolean;
  isTextArea?: boolean;
  placeholder?: string;
  rows?: number;
  setValue: (value: string) => void;
  value: string;
};

export const PreferenceText: FunctionComponent<Props> = ({
  isTextArea,
  placeholder,
  setValue,
  value,
  ...props
}) => {
  const handleChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
    setValue(target.value);
  };

  return createElement(isTextArea ? TextArea : Input, {
    onChange: handleChange,
    placeholder,
    value,
    ...props,
  });
};