I wanted to create a DisplayItems page which takes a GET method (in this case, dummy information from "http://localhost:8000/itemTest") and returns a table with the information with a radio button which allows you to pick which item you would like to bid on. This code used to work correctly but since adding a database to my front end, the code no longer works.
import React, { useState, useEffect } from "react";
import { useLocation, Link } from "react-router-dom";
import axios from "axios";
const DisplayItems = () => {
const [items, setItems] = useState([]);
const [filteredItems, setFilteredItems] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [selectedItemId, setSelectedItemId] = useState(null);
const location = useLocation();
const searchParams = new URLSearchParams(location.search);
const searchQuery = searchParams.get("search") || "";
useEffect(() => {
axios
.get("http://localhost:8000/itemTest")
.then((response) => {
console.log("API Response:", response.data);
setItems(Array.isArray(response.data.item) ? response.data.item : []); // Ensure items is an array
setLoading(false);
})
.catch((err) => {
console.error("Error details:", err);
setError(err.response?.data?.message || "Error fetching items");
setLoading(false);
});
}, []);
useEffect(() => {
if (!searchQuery) {
setFilteredItems(items);
} else {
const filtered = items.filter((item) =>
item.name?.toLowerCase().includes(searchQuery.toLowerCase()) // Handle cases where name might be undefined
);
setFilteredItems(filtered);
}
}, [searchQuery, items]);
const handleRadioChange = (id) => {
setSelectedItemId(id);
};
if (loading) {
return <p>Loading items...</p>;
}
if (error) {
return <p>{error}</p>;
}
return (
<div className="form-container">
<h2>Display Items</h2>
<div>
{items.length > 0 ? (
<table>
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
{filteredItems.map((item) => (
<tr key={item.id}>
<td>
<input
type="radio"
name="bidSelection"
checked={selectedItemId === item.id}
onChange={() => handleRadioChange(item.id)}
/>
</td>
<td>{item.name}</td>
<td>{item.itemdescription}</td>
<td>${item.price}</td>
</tr>
))}
</tbody>
</table>
) : (
<p>No items found.</p>
)}
</div>
{selectedItemId && (
<div>
<Link to={`/forward/${selectedItemId}`}>
<button>Bid</button>
</Link>
</div>
)}
</div>
);
};
export default DisplayItems;
I have tried using "http://localhost:8000/itemTest" whose data is:
[{"id":"1","name":"bike","itemdescription":"This is a bicycle, used for transportation.","startingprice":"19.99","price":"19.99","highestbidderid":"","image_url":"http://example.com/sample-image.jpg"},{"id":"2","name":"paper","itemdescription":"a lovely piece of paper.","startingprice":"1.99","price":"1.99","highestbidderid":"","image_url":"http://example.com/sample-image.jpg"}]
I have checked my data initialization as well:
app.add_middleware(
CORSMiddleware,
allow_origins=["*"],
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
class ItemCreate(BaseModel):
itemdescription: str
name: str
price: float
shippingprice: float
endtime: datetime
startingprice: float
valid: bool
action_type: str
id: int
I have tried to debug this code for hours, but I cannot find why it was once working fine, and now it doesn’t.
