UseEffect() doesn't fetch my data from the api

Question

I'm following a tutorial on a fullstack app. I'm trying to fetch my data from the API using useEffect(). I've followed the tutorial by heart and I'm stuck on this problem for some time and can't seem to find a fix to it. I've also used the Here is the code:

1)Here is the hook for fetching the data from the API.

import { useEffect, useState } from "react";
import axios from "axios";

const useFetch = (url) => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);
  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const res = await axios.get(url);
        setData(res.data);
      } catch (error) {
        setError(error);
      }
      setLoading(false);
    };
    fetchData();
  }, [url]);

  return { data, loading, error };
};

export default useFetch;

2)Here is the API

export const countByType = async (req, res, next) => {
  try {
    const hotelCount = await Hotel.countDocuments({ type: "Hotel" });
    const apartmentCount = await Hotel.countDocuments({ type: "apartment" });
    const resortCount = await Hotel.countDocuments({ type: "resort" });
    const villaCount = await Hotel.countDocuments({ type: "villa" });
    const cabinCount = await Hotel.countDocuments({ type: "cabin" });

    res.status(200).json([
      { type: "hotel", count: hotelCount },
      { type: "apartment", count: apartmentCount },
      { type: "resort", count: resortCount },
      { type: "villa", count: villaCount },
      { type: "cabin", count: cabinCount },
    ]);
  } catch (error) {
    next(createError(500, "Something went wrong"));
  }
};

3)Here I'm trying to use that data to render it on my page.

import useFetch from "../../hooks/useFetch.js";
import "../propertyList/propertyList.css";

const images = [
  "https://images.pexels.com/photos/189296/pexels-photo-189296.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
  "https://images.pexels.com/photos/189296/pexels-photo-189296.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
  "https://images.pexels.com/photos/189296/pexels-photo-189296.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
  "https://images.pexels.com/photos/189296/pexels-photo-189296.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
  "https://images.pexels.com/photos/189296/pexels-photo-189296.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
];

const propertyList = () => {
  const { data, loading, error } = useFetch(
    "//localhost:3000/api/hotels/countByType"
  );

  return (
    <div className="pList">
      {loading ? (
        "loading"
      ) : (
        <>
          {data &&
            images.map((img, i) => (
              <div className="pListItem">
                <img src="" alt="" className="pListImage" />
                <h1>{data[0].type}</h1>
                <span>{data[0].count}</span> <span>{data[0].type}</span>
              </div>
            ))}
        </>
      )}
    </div>
  );
};

export default propertyList;

Here are the photos with the error that I get. I don't think the first one is an error but i think it might help solve the issue.

can you log the result of res.data when you are getting it? it seems like your data[0] item doesn’t have type property. — Misha Reyzlin
– Misha Reyzlin, Commented Mar 13, 2023 at 12:52
i.imgur.com/CEXpCaH.png Don't mind the first 2 ones, their are from another call. Also if i go into and clg the data[0] or data it also gives the same result - the first 2, but i can't access the values type and count. — Tecleanu Ionut
– Tecleanu Ionut, Commented Mar 13, 2023 at 13:03

Siddharth Bagal · Accepted Answer · 2023-03-13 13:14:40Z

2

add null checks where you are using the data

<div className="pList">
  {loading ? (
    "loading"
  ) : (
    <>
      {data && data.length > 0 &&
        images.map((img, i) => (
          <div className="pListItem">
            <img src="" alt="" className="pListImage" />
            <h1>{data[0]?.type}</h1>
            <span>{data[0]?.count}</span> <span>{data[0].type}</span>
          </div>
        ))}
    </>
  )}
</div>

answered Mar 13, 2023 at 13:14

Siddharth Bagal

6446 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tecleanu Ionut Over a year ago

this worked tysm :D

Collectives™ on Stack Overflow

UseEffect() doesn't fetch my data from the api

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related