Display Data based on category using ReactJS - reactjs

Question

I have created a restaurant menu with the help of an API. Now I want to display only the data of a particular category using the category name with the help of react hooks.
Can someone guide me about the function I need to implement in my code to achieve the functionality based on my requirements.
This is App.js:
import React, { useState, useEffect } from 'react';
const Menu = () => {
/*Toggle sidemenu start*/
const [toggleState, setToggleState] = useState(1);
const toggleTab = (index) =>{
setToggleState(index);
}
/*Toggle sidemenu end*/
/* API Data start */
const [data, setData] = useState();
useEffect(() => {
async function fetchData() {
try {
const response = await fetch('https://63b040676a74151a1bbcf341.mockapi.io/restaurantmenu')
const data = await response.json();
setData(data);
console.log("data")
} catch (error) {
console.error(error);
}
}
fetchData();
}, []);
/* API Data end */
return (
<div className='main-content'>
<div className='restaurant-card'>
<div className='image'>
<img src='/images/kfc.png'/>
</div>
<div className='restaurant-details'>
<h2>KFC</h2>
<p>Abids, Hyderabad</p>
<p><img src='/images/rating.png'/><span>4.5 Rating | 09:00 A.M - 11:00 P.M</span></p>
</div>
</div>
<div className='item-category'>
<h3>Categories</h3>
<ul>
<li className={toggleState === 1 ? "tabs active" : "tabs"} onClick={()=>toggleTab(1)}>Pizza</li>
<li className={toggleState === 2 ? "tabs active" : "tabs"} onClick={()=>toggleTab(2)}>Bread</li>
<li className={toggleState === 3 ? "tabs active" : "tabs"} onClick={()=>toggleTab(3)}>Shakes</li>
<li className={toggleState === 4 ? "tabs active" : "tabs"} onClick={()=>toggleTab(4)}>Ice Cream</li>
<li className={toggleState === 5 ? "tabs active" : "tabs"} onClick={()=>toggleTab(5)}>Cakes</li>
<li className={toggleState === 6 ? "tabs active" : "tabs"} onClick={()=>toggleTab(6)}>Juices</li>
</ul>
</div>
<div className='item-list'>
<div className="box">
<input type="text" className="search-input" placeholder="Search for dishes"/>
<img src='/images/search.png'/>
</div>
<div className="content">
{
data
?
(
<div>
<div>
{data.map(item =>
<div>
<h2>{item.Category}</h2>
<div className='items' key={item.id}>
<ul>
<li>{item.Type}</li>
<li>{item.Name}</li>
<li>₹ {item.Price}</li>
<div className='hr'></div>
</ul>
</div>
</div>
)}
</div>
</div>
)
:
(<div>Loading...</div>)
}
</div>
</div>
</div>
)
}
export default Menu;
This is the sandbox link for your reference.
https://codesandbox.io/s/fragrant-wave-9b528h?file=/src/App.js
Share me with whatever the idea you have that can work for me.

Answer 1

You have multiples options:
Only fetch the required category with your API (you need to have the hand on it) by passing the required category to your API, like with querystrings such as fetch(https://63b040676a74151a1bbcf341.mockapi.io/restaurantmenu?category=${categoryName}), and in your API if category's querystring is defined, only show required menu related to the required category.
Filter your returned results to only display wanted categories. It's not quite recommended because you will need to wait to fetch ALL your menu, and filter them afterward so it's quite a loss of time. but it can be achieved easily by replacing your:
<div className="content">
{
data
?
by:
<div className="content">
{data?.filter(({ Category }) => Category === "WantedCategoryName")
?