How to make Categories button functional

Question

I got my current website displaying hard coded data from my data.js file. I implemented firebase as my database and I want to have my categories button work with the firbase database. FYI, I'm fairly new to developing websites and apps. I'm going to attach my app.js and categories.js file.

Here is my code so far.

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

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

  const filterItems = (category) => {
    setActiveCategory(category);
    if (category === "all") {
      setMenuItems(items);
      return;
    }
    const newItems = items.filter((item) => item.category === category);
    setMenuItems(newItems);
  };
  
  return (
    <main>
      <section className="menu section">
        <div className="title">
          <img src={logo} className="logo" />
          <h2>Menu List</h2>
          <div className="underline"></div>
        </div>
        <Categories
          categories={categories}
          activeCategory={activeCategory}
          filterItems={filterItems}
        />
        <Menu items={menuItems} />
      </section>
    </main>
  );
}

export default App;

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

export default Categories;

I attched screenshots of how my menu page looks like.

Answer 1

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;