657 viewsMern Amazona

import { useEffect, useState } from “react”;
import { Link } from “react-router-dom”;
// import data from “../data”;
import axios from “axios”;
function HomeScreen() {
  const [products, setProducts] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios.get(“/api/products”);
      setProducts(result.data);
    };
    fetchData();
  }, []);
  return (
    <div>
      <h1>Jasa Modifikasi Pakaian</h1>
      <div className=’products’>
        {products.map((product) => (
          <div className=’product’ key={product.slug}>
            <Link to={`/product/${product.slug}`}>
              <img src={product.image} alt={product.name} />
            </Link>
            <div className=’product-info’>
              <Link to={`/product/${product.name}`}>
                <p>{product.name}</p>
              </Link>
              <p>
                <strong>${product.price}</strong>
              </p>
              <button>add to card</button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
export default HomeScreen;

whats wrong?

Bassir Answered question September 11, 2023

I would like to see what’s wrong too. Where is the error? , i see the code but the error message might give some hints to what is wrong. The frontend seems ok on a first glance . did you run npm dev to start your backend? if started go to http://localhost:4000/api/products. Do you see your full list of products? if not maybe your products list is empty, in that case go to http://localhost:4000/api/seed .I’m looking at my typescript mern project but yours should be similar check your commands , routes and seed command or route.

You are viewing 1 out of 2 answers, click here to view all answers.