I'm learning TS, and I don't understand why the event, when onChange execute, only accept "any".
I tried to change the event equal React.ChangeEventHandler, but still doesn't work:
const onNameChange = (e: React.ChangeEventHandler<HTMLInputElement>) => {
setField({ ...field, name: e.currentTarget.value });
};I think, some how, my event needs to be equal to my interface "CountProps". Follow the complete code:
import React, { useState } from "react";
interface FieldProps {
name: string;
}
export const TextField: React.FC = () => {
const [field, setField] = useState<FieldProps>({ name: "" });
console.log(field);
const onNameChange = (e: any) => {
setField({ ...field, name: e.currentTarget.value });
};
return (
<div>
<input
type="text"
onChange={onNameChange}
name="name"
value={field.name}
/>
</div>
);
};e is not the handler, it's the event. onNameChange is the handler
const onNameChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
setField({ ...field, name: e.currentTarget.value });
};