here is how I would do it

import React, { useState } from "react";
import Home from "./Home";
import Navigation from './Navigation';
import {BrowserRouter, Route, Routes, Link } from 'react-router-dom';
import About from './About';
import Fire from './firebase/firebase-test'
import FireMenu from './firebase/firebase-menu'
import Menu from './Menu';
import items from "./data";
import Categories from "./Categories";
import { Full_Menu } from "./firebase/firebaseConfig";
import logo from "./img/logo.jpg"; // this could be a placeholder until we get their official logo

function App () {
  return (
    <BrowserRouter>
    <div className="App">
      <Navigation />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/menu" element={<MenuApp />} />
        <Route path= "/fire" element={<Fire />}/>
        <Route path="/firemenu" element={<FireMenu />}/>
      </Routes>
    </div>
  </BrowserRouter>
  
  );
}

const allCategories = ["all", ...new Set(items.map((item) => item.category))];

const MenuApp = () => {
  const [menuItems, setMenuItems] = useState(items)
  const [activeCategory, setActiveCategory] = useState("all");

const filterItems = items?.filter(item => {
        switch (activeCategory) {
            case 'all':
                return true
            case 'all day specials':
            case 'appetizers':
            case 'add ins':
                return item.category === activeCategory
            default:
                return true
        }
    })
  
  return (
    <main>
      <section className="menu section">
        <div className="title">
          <h2>Menu List</h2>
          <div className="underline"></div>
        </div>
        <Categories
          setActiveCategory={setActiveCategory}
          activeCategory={activeCategory}
        />
        <Menu items={filterItems} />
      </section>
    </main>
  );
};

export default App;

import React from "react";

const allCategories = ['all','all day specials','appetizers','seafood platter', 'add ins', 'beef', 'chicken', 'chow mein', 'combinations', 'deep fried goodiness', 'dessert', 'fried rice',
'pork', 'seafood platter', 'sides', 'vegetable', 'whats cooking', 'wing']

const Categories = ({ activeCategory, setActiveCategory, }) => {
  return (
    <div className="btn-container">
      {allCategories.map((category, index) => {
        return (
          <button
            type="button"
            className={`${
              activeCategory === category ? "filter-btn active" : "filter-btn"
            }`}
            key={index}
            onClick={() => setActiveCategory(category)}
          >
            {category}
          </button>
        );
      })}
    </div>
  );
};

export default Categories;