fetch('http://127.0.0.1:8000/api/categories/')
.then(response => response.json())
.then(data => setCategories(data))
.catch(error => console.error('Error fetching categories:', error));
}, []);
useEffect(() => {
if (selectedCategory !== null) {
const id = selectedCategory;
console.log(selectedCategory);
fetch(`http://127.0.0.1:8000/api/categories/${id}/`)
.then(response => response.json())
.then(data => setProducts(data))
.catch(error => console.error('Error fetching products:', error));
} else {
fetch('http://127.0.0.1:8000/api/Product/')
.then(response => response.json())
.then(data => setProducts(data))
.catch(error => console.error('Error fetching products:', error));
}
}, [selectedCategory]);
console.log(selectedCategory);
const toggleSidebar = () => {
setIsSidebarOpen(!isSidebarOpen);
};
const handleCategorySelect = (id) => {
console.log(id)
setSelectedCategory(id);
}; <span ><Side categories={categories} onCategorySelect={handleCategorySelect} />``` this is my category jsx ``` function Side({ categories, onCategorySelect }) {
const handleCategorySelect = (categoryId) => {
onCategorySelect(categoryId); // Pass the category ID to the parent component
console.log('Selected category:', categoryId);
};
return (
<div>
{categories.map(category => (
<div key={category.category_id} onClick={() => handleCategorySelect(category.category_id)} className="cursor-pointer">
{category.name} // Click on the name
</div>
))}
</div>
);
}
export default Side;
``` this is my side.jsx when i click on one of the products i get their id but it doesn't display in frontend
fleet sparrow
weak light