Не могу сам разобраться в ошибке TS
Не успел разобраться как тут вставлять код. А изображения вставляются только одно, или я не понял.
Помогите пожалуйста, чего от меня хочет TS? Может то что я указал ранее не верно
<LoginForm login={Login} error={error})>
app.tsx
import React, { useState } from "react";
import { LoginForm } from "./components/LoginForm";
type User = {
name: string;
password: number;
};
function App() {
const adminUser: User = {
name: "admin",
password: 123,
};
const [user, setUser] = useState({ name: "" });
const [error, setError] = useState<string>("");
const Login = (inputValue: { name: string; password: number }) => {
console.log(inputValue);
if (
inputValue.name === adminUser.name &&
inputValue.password === adminUser.password
) {
console.log("Logged in");
setUser({
name: inputValue.name,
});
} else {
console.log("Fill in the fields!");
setError("Fill in the fields!");
}
};
const Logout = () => {
console.log("Logout");
setUser({
name: "",
});
};
return (
<div className="App">
{user.name !== "" ? (
<div className="welcome">
<h2>
Welcome, <span>{user.name}</span>
</h2>
<button onClick={Logout}>Logout</button>
</div>
) : (
<LoginForm login={Login} error={error} />
)}
</div>
);
}
export default App;
component
import React, { FormEvent, useState } from "react";
interface ILoginForm {
login: string;
error: string;
}
export const LoginForm: React.FC<ILoginForm> = ({ login, error }) => {
const [inputValue, setInputValue] = useState({ name: "", password: "" });
const submitHandler = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
login(inputValue);
};
return (
<form onSubmit={submitHandler}>
<div className="form-inner">
<h2>Wellcome to Chatty!</h2>
<h2>Please, autorize yourself</h2>
{error !== "" ? <div className="error">{error}</div> : ""}
<div className="form-group">
<label htmlFor="name">User name</label>
<input
type="text"
name="name"
id="name"
placeholder="Input user name"
onChange={(e) =>
setInputValue({ ...inputValue, name: e.target.value })
}
value={inputValue.name}
/>
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input
type="password"
name="password"
id="password"
placeholder="Input password"
onChange={(e) =>
setInputValue({ ...inputValue, password: e.target.value })
}
value={inputValue.password}
/>
</div>
<input type="submit" value="Log In" />
</div>
</form>
);
};
<LoginForm login={Login} error={error})>
Ответы (1 шт):
Автор решения: Spatz
→ Ссылка
Исправьте описание интерфейса:
interface ILoginForm {
login: (inputValue: { name: string, password: string }) => void
error: string
}