I am working on a Hall Booking Project, and I am facing an issue where React is not displaying data fetched from the backend API.
The API call is successful — data shows properly in console.log() — but it does not render on the page.
Here is my React component code:
import useUserContext from './useUserContext';
import useApi from './useApi';
import { getUSerData } from './api';
function Home() {
const { loading, error } = useUserContext();
const [data, setData] = useState(null);
const { callApi } = useApi();
const getData = async () => {
try {
const response = await callApi(getUSerData);
console.log("API response:", response);
if (response && response.success) {
setData(response.user);
console.log("Data set:", response.user);
} else {
console.log("DATA NOT FOUND");
setData(null);
}
} catch (err) {
console.error("Error fetching user data:", err);
setData(null);
}
};
return (
<div>
<h3 className='text-center text-4xl font-semibold font-serif text-gray-600'>
HOME
</h3>
{loading && <p className='text-center text-2xl font-semibold font-serif text-gray-600'>Loading...</p>}
{error && <p className='text-center text-2xl font-semibold font-serif text-gray-600'>{error}</p>}
<button
onClick={getData}
className="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700 transition duration-300"
>
GET DATA
</button>
{data ? (
<div className='text-center text-2xl font-semibold font-serif text-gray-600'>
<p>Name: {data.name}</p>
<p>Email: {data.email}</p>
<p>Contact No: {data.contactNo}</p>
</div>
) : (
<p className='text-center text-2xl font-semibold font-serif text-gray-600'>Data Not Found</p>
)}
</div>
);
}
Here is my custom hook used to call API:
import useUserContext from "./useUserContext";
const useApi = () => {
const { setLoading, setError } = useUserContext();
const callApi = async (apiFunction) => {
try {
setLoading && setLoading(true);
return await apiFunction();
} catch (error) {
setError && setError(error.response?.data?.message || 'Something went wrong');
throw error;
} finally {
setLoading && setLoading(false);
}
};
return { callApi };
};
export default useApi;
The getUserData method:
const getUSerData = async () => {
const response = await axios.get(
`${API_URL}/getuser`,
{ withCredentials: true }
);
return response.data;
}
Here is the output screenshot:
Now, if I use this direct method, it works and displays data properly:
function Home() {
const [userData, setUserData] = React.useState(null);
const getUserData = async () => {
try {
const response = await axios.get(
'http://localhost:3360/api/v1/users/getuser',
{ withCredentials: true }
);
console.log("Data Fetched ", response);
if (response.data && response.data.success) {
setUserData(response.data.user);
} else {
setUserData(null);
}
} catch (error) {
console.log(error);
setUserData(null);
}
}
return (
<div>
<h3>HOME</h3>
<button
className="border px-3 py-1.5 m-5 bg-transparent shadow-xl rounded hover:bg-indigo-500 hover:text-white transition-colors"
onClick={getUserData}>Fetch</button>
{userData ? (
<div>
<h3>User Data:</h3>
<p>Name: {userData.name}</p>
<p>Email: {userData.email}</p>
<p>Contact: {userData.contactNo}</p>
</div>
) : (
<h3>No user data available</h3>
)}
</div>
);
}
Question Summary:
✅ Data fetch is working and shown in console.
❌ But in my reusable hook method, data is not displayed in UI.
✅ When I use axios.get() directly inside the component, it works fine.
Please help me understand:
Why is my reusable hook method not working?
How can I fix it to display data properly?
Thanks in advance!