Типизация props в Input
Не можу задати тип rest, завжди якась ошибка. Вот код
import { InputProps } from "./interfaces";
import React from "react";
const Input: FC<InputProps> = ({ name, type = "text",label, ...rest }) => {
return (
<div className="relative z-0 w-full mb-8">
<input
id={name}
type={type}
placeholder=" "
className="pt-3 pb-2 block w-full px-0 mt-0 bg-transparent border-0 border-b-2 appearance-none focus:outline-none focus:ring-0 focus:border-black border-gray-200"
{...rest}
/>
<label
htmlFor={name}
className="absolute duration-300 top-3 -z-1 origin-0 text-gray-500"
>
{label}
</label>
</div>
);
};
export default Input;
Код файла interfaces:
export type InputProps = {
label: string,
name: string,
type: string,
rest?: any
}
Код файла App:
import Input from "./component/Input/input";
import React from "react";
const App: ReactNode = () => {
const [email, setEmail] = useState<string>("");
const [password, setPassword] = useState<string>("");
return (
<div className="w-full h-screen flex items-center justify-center m-auto">
<div className="max-w-md w-full m-auto mt-48 p-5 bg-white border rounded">
<h2 className="font-medium text-xl">Login</h2>
<form className="pt-5">
<Input
label="Email"
name="email"
type="email"
value={email}
onChange={(v) => setEmail(v.target.value)}
/>
<Input
label="Password"
name="password"
type="password"
value={password}
onChange={(v) => setPassword(v.target.value)}
/>
<button
type="submit"
className="bg-blue-500 px-4 py-2 rounded-full text-white hover:bg-blue-600 active:bg-blue-700"
>
Submit
</button>
</form>
</div>
</div>
);
};
export default App;
Ошибки:
Type '{ label: string; name: string; type: string; value: string; onChange: (v: any) => void; }' is not assignable to type 'IntrinsicAttributes & InputProps & { children?: ReactNode; }'.
Property 'value' does not exist on type 'IntrinsicAttributes & InputProps & { children?: ReactNode; }'.