HTMLInputElement throwing a type error when switching an element between types

user_14636031 0
Viewed 140

I'm trying to code along to this React GraphQL TypeScript tutorial

Goal: Basically the HTML element type should be set to be the element 'Textarea' if the default variable: 'textarea' = true, and set to element 'Input' if variable:'textarea' = false.

Currently I'm at minute 6:05:28 and I'm stuck with the following error which does not appear in the video, I'm not sure why. I realised this doesn't really affect anything (the thing still works) but its showing a red underline error which is rather annoying:

Type 'ComponentWithAs<"textarea", TextareaProps>' is not assignable to type 'ComponentWithAs<"input", InputProps>'.
Types of parameters 'props' and 'props' are incompatible.
Type 'MergeWithAs<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, any, InputProps, any>' is not assignable to type 'MergeWithAs<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, any, TextareaProps, any>'.
Type 'MergeWithAs<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, any, InputProps, any>' is not assignable to type 'OmitCommonProps<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, keyof TextareaProps>'.
Types of property 'ref' are incompatible.
Type 'LegacyRef<HTMLInputElement> | undefined' is not assignable to type 'LegacyRef<HTMLTextAreaElement> | undefined'.
Type '(instance: HTMLInputElement | null) => void' is not assignable to type 'LegacyRef<HTMLTextAreaElement> | undefined'.
Type '(instance: HTMLInputElement | null) => void' is not assignable to type '(instance: HTMLTextAreaElement | null) => void'.
Types of parameters 'instance' and 'instance' are incompatible.
Type 'HTMLTextAreaElement | null' is not assignable to type 'HTMLInputElement | null'.
Type 'HTMLTextAreaElement' is missing the following properties from type 'HTMLInputElement': accept, align, alt, capture, and 26 more.

The line giving error is: InputOrTextarea being highlighted in red with the above error

InputOrTextarea = Textarea;

The full code is:

type InputFieldProps = InputHTMLAttributes<HTMLInputElement> & {
  label: string;
  name: string;
  textarea?: boolean;
};

export const InputField: React.FC<InputFieldProps> = ({
  label, 
  textarea,
  size: _,
  ...props
}) => {
  let InputOrTextarea = Input;
  if (textarea) {
    InputOrTextarea = Textarea;
  }
  const [field, {error, }] = useField(props);
    return (
      <FormControl isInvalid = {!!error}>
        <FormLabel htmlFor={field.name}>{label}</FormLabel>
        <InputOrTextarea {...field} {...props} id = {field.name} placeholder={props.placeholder}/>
        {error ? <FormErrorMessage>{error}</FormErrorMessage> : null}
      </FormControl>
    );
}
chakra-ui formik react-hooks reactjs html
2 Answers

For you or anyone else:

I had the same issue and I was watching the same video. You need to change the import from '@chakra-ui/react' to '@chakra-ui/core'.

I was using '@chakra-ui/core' and it gave me an error. As soon I install 'yarn add @chakra-ui/core @emotion/core @emotion/styled emotion-theming' and I used the core import, the error is gone.

user_167044060

You could try forcing the type on InputOrTextarea to allow an input or textarea to be assigned to it. For example:

  let InputOrTextarea: HTMLInputElement | HTMLTextAreaElement | null = Input;
  if (textarea) {
    InputOrTextarea = Textarea;
  }
user_2874760
Related