Why can't I use this component with TypeScript?

user_4403732 0
Viewed 200

I found a react-debounce-input library and I use it in my app without issues.

But since I moved to TypeScript, I'm getting an error when trying to use this library. Here's the minimal reproducible example:

import { FunctionComponent } from 'react';
import { DebounceInput } from 'react-debounce-input';

type Props = {};

export const Foo: FunctionComponent<Props> = () => {
  return (
    <form>
      <DebounceInput />
    </form>
  );
};

The error I'm getting is:

TS2786: 'DebounceInput' cannot be used as a JSX component.
  Its instance type 'DebounceInput<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>' is not a valid JSX element.
    Type 'DebounceInput<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more.

Am I missing something? According to the docs, it should work. I am using the newest version.

typescript reactjs
1 Answers

No problem with typescript:

import { FunctionComponent } from "react";
import { DebounceInput } from "react-debounce-input";
import { useState } from "react";

type Props = {};

export const Foo: FunctionComponent<Props> = () => {
  const [state, setState] = useState("");

  return (
    <form>
      <div>input: {state}</div>

      <DebounceInput
        minLength={5}
        debounceTimeout={500}
        onChange={(e) => setState(e.target.value)}
      />
    </form>
  );
};

Sandbox try it out

Side note on the type of react function, it can be written as:

const Foo: React.FC<Props> = () => { ... }

This way you don't have to do import { FunctionComponent } from "react";

user_166481270
Related