Hi I'm making an email form, but I'm having some trouble with typescript.
I got the following error when I use rest props in typescript.
What am I doing wrong? How can I use rest props in typescript?
↓ Input.tsx code
interface StyledProps {
type: string;
id: string;
value: string;
}
interface InputProps extends StyledProps {
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
onBlur?: () => void;
reset?: () => void;
}
function Input({
type,
id,
value,
onBlur,
onChange,
reset,
...res
}: InputProps) {
console.log("rest",res); //{placeholder: 'enter email address '}
return (
<StyledInput
type={type}
id={id}
value={value}
onChange={onChange}
onBlur={onBlur}
{...res}
/>
);
}
↓ parent code
<form onSubmit={submitHandler}>
<div>
<Input
type="id"
id="id"
value={userId}
**placeholder="enter email address"** // I got the error in here
onBlur={userIdBlurHander}
onChange={userIdChangeHandler} />
</div>
</form>
