Component input React typescript

Question

I'm starting in React and I'm trying to create a Component from an input to a TODO. But when importing the component to App.tsx it is not working (nor does it capture typing). Using input instead of my Component it works normally. I don't understand what mistake I'm making.

interface InputProps {
  type: string;
  onChange: (e: any) => void;
  value?: string;
  ref?: any;
}
export default function Input({ onChange, ref, value, type }: InputProps) {
  return (
    <input
      type={type}
      onChange={(event) => onChange(event.target.value)}
      value={value}
      ref={ref}
    />
  );
}

Link to codesandbox

https://codesandbox.io/s/todo-list-using-react-hooks-and-typescript-forked-c9md53

Answer 1

The problem here is that you are passing the wrong type of argument to your onChange Prop.

In App.tsx you have onChange={(e) => setValue(e.target?.value)} which means you expect the argument to be the event but in InputComponent.tsx you are calling it with the value.

You can fix this on the App.tsx side:

onChange={(value) => setValue(value)}

or in InputComponent.tsx:

onChange={onChange}
// short for:  onChange={(event) => onChange(event)}