React Function Component

import React, { useState, useEffect } from 'react';

const UserProfile = ({ userId }) => {

  const [user, setUser] = useState(null);

  const [loading, setLoading] = useState(true);

  useEffect(() => {

    const fetchUser = async () => {

      try {

        const response = await fetch(`/api/users/${userId}`);

        const data = await response.json();

        setUser(data);

      } catch (error) {

        console.error('Failed to fetch user:', error);

      } finally {

        setLoading(false);

      }

    };

    fetchUser();

  }, [userId]);

  if (loading) return <div>Loading...</div>;

  if (!user) return <div>User not found</div>;

  return (

    <div className="user-profile">

      <h2>{user.name}</h2>

      <p>Email: {user.email}</p>

      <p>Joined: {new Date(user.createdAt).toLocaleDateString()}</p>

    </div>

  );

};

export default UserProfile;