Type 'void' is not assignable to type '((event: ChangeEvent<HTMLInputElement>) => void) React TypeScript

Question

Im a beginner in React Typescript, and I have defined some props is a .JS file that I want to use in a .tsx file. but I receive this error on one of my TypeScript lines:

 <MyTextField style={{width:'60%'}}  name='ActivationDate' type='date' defaultValue={values1.ActivationDate} onChange={handleChange('ActivationDate')}/>

Type 'void' is not assignable to type '((event: ChangeEvent<HTMLInputElement>) => void) | ((event: ChangeEvent<HTMLSelectElement>) => void) | ((event: ChangeEvent<HTMLTextAreaElement>) => void) | undefined'.

The CodeSandbox contains both my JS file and TSX file : https://codesandbox.io/s/tsx-rj694

what seems to be the problem and how can I write this correctly?

Answer 1

I assume you are not passing the event object into the handleChange method.

This is how you should amend your onChange event handler:

onChange={() => handleChange('ActivationDate')}

For your information, if you need to access the event object in the onChange call, you will need to explicitly specify the right types.

onChange={handleChange}

And when you define the function,

const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
  // do the rest here
}