我创建了一个ReactJS应用程序，它可以显示来自API的数据。
现在我想根据项目的类别来分离和显示数据。
我在API中的数据是这样的

[
 {
  "Name": "Chicken pizza",
  "Category": "Pizza",
  "Type": "non-veg",
  "Price": 376,
  "id": "1"
 },
{
    "Name": "Oreo Milkshake",
    "Category": "Shakes",
    "Type": "veg",
    "Price": 130,
    "id": "9"
  }
]

因此，每当我点击比萨饼，它应该只显示与“类别”的项目：“比萨饼”与“类别”相同：基于点击功能的“振动”。
如何根据我的需求实现我希望在应用程序上实现的功能。
下面是我的代码App.js：

import React, { useState, useEffect } from 'react';

const App = () => {

    /*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 App;

这是我的沙盒链接，如果你想要任何进一步的信息：
https://codesandbox.io/s/fragrant-wave-9b528h?file=/src/App.js
引导我通过我所面临的问题，无论你有什么想法或解决方案，可以帮助我克服这一点。
我想通过在sidemenu中使用OnClick函数来显示数据，以显示API中的不同类别，并根据类别更改数据。