forked from iamtalwinder/react-testing-recepies
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Profile.tsx
52 lines (46 loc) · 1.18 KB
/
Profile.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
interface ProfileParams {
[key: string]: string | undefined;
userId: string;
}
interface UserProfile {
id: number;
name: string;
username: string;
email: string;
}
function Profile() {
const { userId } = useParams<ProfileParams>();
const [profileData, setProfileData] = useState<UserProfile | null>(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data: UserProfile = await response.json();
setProfileData(data);
} catch (error) {
console.error('Fetch error:', error);
setProfileData(null);
}
};
fetchData();
}, [userId]);
return (
<div>
{profileData ? (
<div>
<h2>{profileData.name}</h2>
<p>Username: {profileData.username}</p>
<p>Email: {profileData.email}</p>
</div>
) : (
<p>Loading...</p>
)}
</div>
);
};
export default Profile;