Below is the code snippet from my JSX file:
import { useState, useEffect } from "react";
import { PropTypes } from "prop-types";
import { HashtagIcon } from "@heroicons/react/24/outline";
// Function to fetch categories from the API (temporary replaced with hardcoded values)
const fetchCategories = () => {
return new Promise((resolve) => {
setTimeout(() => {
const categories = [
{ id: 1, name: "Human Resources", icon: "icon" },
{ id: 2, name: "Technological Innovation", icon: "icon" },
{ id: 3, name: "Marketing Strategies", icon: "icon" },
// More category objects...
];
resolve(categories);
}, 1000);
});
};
function CategoryList({ onCategorySelect }) {
const [categoryList, setCategoryList] = useState([]);
useEffect(() => {
// Load categories on component mount
fetchCategories().then((categories) => {
setCategoryList(categories);
});
}, []);
function handleCategorySelect(categoryId) {
// Function to filter ideas based on selected category
onCategorySelect(categoryId);
}
return (
<div className="flex flex-wrap">
{categoryList.map((category) => (
<div
key={category.id}
className="flex items-center justify-center w-1/3 md:w-1/4 lg:w-1/6 p-1 md:p-2 cursor-pointer"
onClick={() => handleCategorySelect(category.id)}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
handleCategorySelect(category.id);
}
}}
role="button"
tabIndex={0}
>
<div className="flex flex-col items-center bg-orange-500 rounded-lg h-20 border-2 border-gray-700">
<div className="flex items-center justify-center h-12 w-12 bg-indigo-200 rounded-full mb-2 mt-1">
<HashtagIcon className="h-5 w-6" />
</div>
<div className="text-xs font-sans font-semibold truncate w-20 text-center">
<span className="ml-1">{category.name}</span>
</div>
</div>
</div>
))}
</div>
);
}
CategoryList.propTypes = {
onCategorySelect: PropTypes.func.isRequired, // Callback function for category selection
};
export default CategoryList;
Issue: The borders are not showing in the specific line. Even after trying different div classNames, the borders still do not appear. I have tested it on a codesandbox file and the borders work fine there. I suspect it could be related to the functions used in my code, but I'm unsure of the exact cause.
I experimented with applying borders to other div classNames, but faced the same issue of borders not appearing. Therefore, I decided to test it out on a codesandbox file where the borders worked perfectly. I believe the problem might be due to the complexity of my functions, but I am unable to pinpoint the exact reason behind this issue.