Property 'placeholder' does not exist on type 'IntrinsicAttributes & InputProps'.ts(2322)

Viewed 715

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.

enter image description here

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>

0 Answers
Related