Changes done

src/components/UserDetails.jsx

@@ -6,40 +6,48 @@ const UserDetails = () => {
   const navigate = useNavigate();
   const location = useLocation();
 
-  const [users, setUsers] = useState(location.state?.users || []);
   const [user, setUser] = useState(null);
+  const [error, setError] = useState(null);
 
   useEffect(() => {
-    if (users.length > 0) {
-      const foundUser = users.find((user) => user.id === parseInt(id));
-      setUser(foundUser);
-    } else {
-      const fetchUsers = async () => {
-        const response = await fetch("https://jsonplaceholder.typicode.com/users");
-        const data = await response.json();
-        setUsers(data);
-        const foundUser = data.find((user) => user.id === parseInt(id));
-        setUser(foundUser);
-      };
-      fetchUsers();
-    }
-  }, [id, users]);
+    const fetchUser = async () => {
+      try {
+        const response = await fetch(
+          `https://jsonplaceholder.typicode.com/users/${id}`
+        );
+
+        if (!response.ok) {
+          throw new Error("User not found.");
+        }
+
+        const userData = await response.json();
+        setUser(userData);
+      } catch (err) {
+        setError(err.message);
+      }
+    };
+
+    fetchUser();
+  }, [id]);
 
   const handleDelete = () => {
-    const updatedUsers = users.filter((u) => u.id !== parseInt(id));
     alert(`User with ID ${id} deleted.`);
-    navigate("/", { state: { users: updatedUsers } });
+    navigate("/", { state: { userIdToDelete: id } });
   };
 
-  if (!user) {
+  if (error) {
     return (
       <div>
-        <p>User not found.</p>
+        <p>{error}</p>
         <button onClick={() => navigate("/")}>Return to Home</button>
       </div>
     );
   }
 
+  if (!user) {
+    return <div>Loading...</div>;
+  }
+
   return (
     <div className="container">
       <h1>User Details</h1>