Lesson Connecting to the Backend → 12 - Creating Data, getting error on “onClick={addUser}”:
Error: Type ‘(user: User) => void’ is not assignable to type 'MouseEventH
Error is on button “Add” → onClick:
import { useEffect, useRef, useState } from “react”;
import axios, { CanceledError } from “axios”;
interface User {
id: number;
name: string;
}
function App() {
useEffect(() => {
document.title = “My App”;
});
const [users, setUsers] = useState<User>();
const [error, setError] = useState(“”);
const [isLoading, setLoading] = useState(false);
useEffect(() => {
const controller = new AbortController();
setLoading(true);
axios
.get<User>(“https://jsonplaceholder.typicode.com/users”, {
signal: controller.signal,
})
.then((res) => {
setUsers(res.data);
setLoading(false);
})
.catch((err) => {
if (err instanceof CanceledError) return;
setError(err.message);
setLoading(false);
});
return () => controller.abort();
}, );
const deleteUser = (user: User) => {
const originalUsers = […users];
setUsers(users.filter((u) => u.id !== user.id));
axios
.delete(“xxx” + user.id)
.catch((err) => {
setError(err.message);
setUsers(originalUsers);
});
};
const addUser = (user: User) => {
const originalUsers = […users];
const newUser = { id: 0, name: “Mosh” };
setUsers([newUser, …users]);
axios
.post(“xxxx”, newUser)
.then(({ data: savedUser }) => setUsers([savedUser, …users]))
.catch((err) => {
setError(err.message);
setUsers(originalUsers);
});
};
return (
<>
{error &&
{error}
}{isLoading && }
Add
-
{user.name}
<button
className=“btn btn-outline-danger”
onClick={() => deleteUser(user)}
>
Delete
{users.map((user) => (
))}
</>
);
}
export default App;