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?
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.
hello there,
What is the error message?
send it over discord channel here to get the solution here: https://discord.gg/EXCUcAH9