React with Mosh

React
1

Hello dear , there is an error in the code below, I have reviewed it many times but dont get it
would you please check it

import axios, { CanceledError } from “axios”;
import { useEffect, useState } from “react”;

interface User {
id: number;
name: string;
}

const App = () => {
const [users, setUsers] = useState<User>();
const [Error, setError] = useState(“”);
const [Loading, setLoading] = useState(false);

useEffect(() => {
const controler = new AbortController();
setLoading(true);
axios
.get<User>(“https://jsonplaceholder.typicode.com/users”, {
signal: controler.signal,
})
.then((res) => {
setUsers(res.data);
setLoading(false);
})
.catch((err) => {
if (err instanceof CanceledError) return;
setError(err.message);
setLoading(false);
});
return () => controler.abort();
}, );
const AddUser = () => {
const orginalusers = […users];
const newUser = { id: 0, name: “Razieh Berah” };
setUsers([newUser, …users]);
axios
.post(“https://jsonplaceholder.typicode.com/users/”, newUser)
.then((res) => setUsers([res.data, …users]))
.catch((err) => {
setError(err.message);
setUsers(orginalusers);
});
};
const DeleteUser = (user: User) => {
const orginalusers = […users];

setUsers(users.filter((u) => u.id !== user.id));
axios
  .delete("https://jsonplaceholder.typicode.com/users/" + user.id)
  .catch((err) => {
    setError(err.message);
    setUsers(orginalusers);
  });

};
return (


{Loading &&

}
{Error &&

{Error}

}

Add


    {users.map((u) => (

  • {u.name}

    Update
    <button
    className=“btn btn-outline-danger”
    onClick={() => DeleteUser(user)}
    //**here is the problem which say the user in unclear //
    >
    Delete



    • ))}


);
};
export default App;

2

Could you please provide the actual error message

3

Cannot find name ‘user’. Did you mean ‘users’?ts(2552)

App.tsx(10, 10): ‘users’ is declared here.

4

Screenshot it in vscode so as I can see the full error stack, that way it’s way easier to know bad boy line of code

5

1
1739×665 29.8 KB

2
2746×667 34.9 KB

3
3829×664 32.1 KB

4
4833×579 22.7 KB

6

Hi try pass u instead of user inside the DeleteUser function

7

Hi
the problem solved, thanks
but I still dont get the reason. why should I use u instead of user?

8

well its because u is the variable that you used to represent a user under the map block of your ul element, its a matter of a variable scoop

9

I get that, thank u so much