Type 'ChangeEvent<HTMLInputElement>' is not assignable to type 'ChangeEvent<HTMLSelectElement>' in React js?

Question

I am passing an onChange event as a props to a component But I am getting datatype error.

Parent Component -

const onChangeStatus=(selectType:string , e:React.ChangeEvent<HTMLSelectElement>) => {
        const { options } = e.target;
        console.log(options)
    }

<GlobalSearchAssignmentFilter
                    onChangeAssignmentStatus={onChangeStatus}
                />

Child Component - I have defined an interface like

interface A {
    onChangeAssignmentStatus: (
        selectType: string,
        event:React.ChangeEvent<HTMLInputElement>
    ) => void;
}

component code - <Select multiple native onChange={(event: React.ChangeEvent):void => onChangeAssignmentStatus(ASSIGNMENT_STATUS_PROPERTY , event) } inputProps={{ id: 'select-multiple-native', }} > {assignmentFilterData.assignmentDispositions.map((item: any) => ( {item.key} ))}

I am importing Select from Material UI multi select. I am getting error when I am passing onChangeAssignmentStatus event to child component. The error is -

Type '(selectType: string, e: React.ChangeEvent<HTMLSelectElement>) => void' is not assignable to type '(selectType: string, event: ChangeEvent<HTMLInputElement>) => void'.
  Types of parameters 'e' and 'event' are incompatible.
    Type 'ChangeEvent<HTMLInputElement>' is not assignable to type 'ChangeEvent<HTMLSelectElement>'.
      Type 'HTMLInputElement' is missing the following properties from type 'HTMLSelectElement': length, options, selectedIndex, selectedOptions, and 3 more. 

How can I resolve this error ?

Answer 1

In your onChangeStatus function, you are expecting e to be of type React.ChangeEvent<HTMLSelectElement>.

However, in your interface A, you set the type of event to React.ChangeEvent<HTMLInputElement>.

These two types do not match, that's why you get the error.

If you want to fix the error, modify the parameter e in your onChangeStatus function to have the type React.ChangeEvent<HTMLInputElement> like this:

const onChangeStatus=(selectType:string , e:React.ChangeEvent<HTMLInputElement>) => {
        const { options } = e.target;
        console.log(options)
}

Or modify your interface A so the parameter event of the function onChangeAssignmentStatus is of type React.ChangeEvent<HTMLSelectElement> like this:

interface A {
    onChangeAssignmentStatus: (
        selectType: string,
        event:React.ChangeEvent<HTMLSelectElement>
    ) => void;
}

Also, you could set the type of onChangeStatus to match the one in interface A. This way typescript tells you exactly what type the parameters should be. If you want to do this, you can access the type of onChangeAssignmentStatus with A['onChangeAssignmentStatus'].