I am very new in react and needed a search function which result should return match ‘in category’, ‘in subcategory’, ‘in product’, similar endpoint below.
My code below only return match when user input productname and null if search with categoryname or subcategoryname
My Code
const SearchSection = () => {
const classes = useStyles();
const theme = useTheme();
const [inputData, setInputData] = useState("")
const handleFilter = e =>{
const searchWord = e.target.value
setInputData(searchWord)
const newFilter = categories.filter((product ) => {
return product.productname.toLowerCase().includes(searchWord.toLowerCase())
})
if(searchWord === "") {
setFilteredData([])
}else {
setFilteredData(newFilter )
}
}
console.log(filteredData)
return (
<>
<Navbar />
<div className={classes.hero}>
<div className={classes.overlay}></div>
<div className={classes.heroContentContainer}>
<div className={classes.heroSection}>
<div className={classes.SearchBar} >
<SearchField value={inputData} onChange={handleFilter} name="search" />
</div>
</div>
</div>
</div>
<Container>
{filteredData.map(productName =>{
return(
<SearchCard productName={productName} />
)
})}
</Container>
</>);};
endpoints data structures
[
{
"_id": "61afe234d43c9ad47188bff3",
"categoryname": "Restaurant",
"subcategory": [
{
"_id": "61b3823901e636b6782375ef",
"subcategoryname": "Grilled Food",
"subcategoryimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg",
"product": [
{
"_id": "61daec0b29f2c8c9337fa593",
"productname": "Poultry",
"productdescription": "Lorem ipsum dolor sit amet",
"productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
},
{
"_id": "61daec1729f2c8c9337fa59c",
"productname": "Fish",
"productdescription": "Lorem ipsum dolor sit amet",
"productimage": "https://res.cloudinary.com/ajeo/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
},
{
"_id": "61daec2529f2c8c9337fa5a2",
"productname": "Vegetarian",
"productdescription": "Lorem ipsum dolor sit amet, consectetur ",
"productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
}
],
},
{
"_id": "61b3824501e636b6782375f3",
"subcategoryname": "Traditional delicacies",
"subcategoryimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg",
"product": [
{
"_id": "61daee16d94f72b6d15396a8",
"productname": "Peppered meat",
"productdescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
}
],
},
{
"_id": "61b3824e01e636b6782375f7",
"subcategoryname": "Crustacean",
"subcategoryimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg",
"product": [
{
"_id": "61daee55d94f72b6d15396f8",
"productname": "Seafood",
"productdescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
}
],
},
{
"_id": "61b3825601e636b6782375fb",
"subcategoryname": "Sandwiches",
"subcategoryimage": "https://res.cloudinary.com/ajeo/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg",
"product": [
{
"_id": "61b3839d01e636b678237638",
"productname": "Pizza",
"productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg",
"imageurl": "uploads/placeholder-1639154589069-957455144.jpeg",
"productdescription": "undefined"
},
{
"_id": "61daeee9d94f72b6d1539784",
"productname": "Shawarma",
"productdescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, ",
"productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
},
{
"_id": "61daef43d94f72b6d15397c9",
"productname": "Burger",
"productdescription": "Lorem ipsum dolor sit amet, consectetur ",
"productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
}
],
},
{
"_id": "61daeae829f2c8c9337fa4f0",
"subcategoryname": "Drinks",
"imageurl": "",
"product": [
{
"_id": "61daef69d94f72b6d15397fa",
"productname": "Cocktail",
"productdescription": "Lorem ipsum dolor sit amet, ",
"productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
},
{
"_id": "61daef72d94f72b6d1539800",
"productname": "Alcoholic drinks",
"productdescription": "Lorem ipsum dolor sit amet",
"productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
},
{
"_id": "61daef79d94f72b6d1539806",
"productname": "Juice",
"productdescription": "Lorem ipsum dolor sit amet",
"productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
},
],
"subcategoryimage": "https://res.cloudinary.com/ajeo/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg",
],
},
{
"_id": "61afe234d43c9ad47188bf",
"categoryname": "Dining",
"subcategory": [
{
"_id": "61b3823901e636b6782375ef",
"subcategoryname": "Shawama",
"subcategoryimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg",
"product": [
{
"_id": "61daec0b29f2c8c9337fa593",
"productname": "Bird",
"productdescription": "Lorem ipsum dolor sit amet",
"productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
},
{
"_id": "61daec1729f2c8c9337fa59c",
"productname": "Cat",
"productdescription": "Lorem ipsum dolor sit amet",
"productimage": "https://res.cloudinary.com/ajeo/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
},
{
"_id": "61daec2529f2c8c9337fa5a2",
"productname": "Vegans",
"productdescription": "Lorem ipsum dolor sit amet, consectetur ",
"productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
}
],
},
{
"_id": "61b3824501e636b6782375f3",
"subcategoryname": "Delicacies",
"subcategoryimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg",
"product": [
{
"_id": "61daee16d94f72b6d15396a8",
"productname": "Meat",
"productdescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
}
],
},
{
"_id": "61b3824e01e636b6782375f7",
"subcategoryname": "Crust",
"subcategoryimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg",
"product": [
{
"_id": "61daee55d94f72b6d15396f8",
"productname": "food",
"productdescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
}
],
},
{
"_id": "61b3825601e636b6782375fb",
"subcategoryname": "Sand",
"subcategoryimage": "https://res.cloudinary.com/ajeo/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg",
"product": [
{
"_id": "61b3839d01e636b678237638",
"productname": "Pizza",
"productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg",
"imageurl": "uploads/placeholder-1639154589069-957455144.jpeg",
"productdescription": "undefined"
},
{
"_id": "61daef43d94f72b6d15397c9",
"productname": "Burger",
"productdescription": "Lorem ipsum dolor sit amet, consectetur ",
"productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
}
],
},
],
},]