0

I'm trying to fetch the shop and it's coupons, I have two model one for the shop and one for the coupon, also two routers, one for fetching shops and one for fetching coupons, the shops are fetching fine and showing in client side, but the coupons are not showing in the client side. When /coupons/${shopName} I try it in postman it works fine, but in the client side not, I don't know why. Console log is giving me [object Object]

export default function ShopPage() {
  
  const [shop, setShop] = useState("");
  const shopName = useParams().shopName;
  const [coupons, setCoupons] = useState([]);

  useEffect(() => {
    const fetchShop = async () => {
      const res = await axios.get(`/shops/${shopName}`);
      setShop(res.data);
      console.log(res.data);
    };
    fetchShop();
  }, [shopName]);
  
  
  useEffect(() => {
    const fetchShopCoupons = async () => {
      const response = await axios.get(`/coupons/${shopName}`);
      setCoupons(response.data);
      console.log("Shop Coupons are:" + response.data);
    };
    fetchShopCoupons();
  }, []);

  return (
    <>

        <Box>
          <Stack>
          
            <Stack >
              <Avatar alt={(shop.shopName)} 
                    src={shop.shopPic}/>
            
              <Stack>
                <Box>
                  <Typography>
                      {shop.shopName}
                  </Typography>
                </Box>            
                </Box>
            </Stack>
        </Stack>
        <Box>
        <Coupons coupons={coupons}/>
        </Box>
        </Stack>
        </Box>
    </>
  )
}

My question is why it's returning [object Object] while it supposed to return the data. I tried JSON.stringify but it showing me the data in a way that it can't be readable.

sultan.h
  • 331
  • 1
  • 4
  • 16
  • 2
    This: `console.log("Shop Coupons are:" + response.data);` has to convert `response.data` to a string, since you're concatenating it with another string. The default string representation for an object is `[object Object]`. You can log the actual value by separating the arguments rather than concatenating them: `console.log("Shop Coupons are:", response.data);` – David Nov 22 '22 at 13:59

0 Answers0