Why my filter button is not working ? Can anybody check my code please?

[las4134]

I am a JS beginner, and I recently started building a filter product JS project
And I stuck with this function which when I click the button, product will be filtered
by a category

I don’t know what is the problem.

Here is my JS code

const menu = [
 {
   id: 1,
   title: "Cake",
   category: "cake",
   price: 15,
   img: "./img/cake.jpeg",
   desc: ' bldakfjldasjfl bladkjflakdflk vakldjfldsjlfaajdslf ',
 },

 {
   id: 2,
   title: "cupcake",
   category: "cupcake",
   price: 15,
   img: "./img/cupcake.jpeg",
   desc:' bldakfjldasjfl bladkjflakdflk vakldjfldsjlfaajdslf ',
 },


 {
   id: 3,
   title: "cake",
   category: "cake",
   price: 15,
   img: "./img/cake2.jpeg",
   desc: ' bldakfjldasjfl bladkjflakdflk vakldjfldsjlfaajdslf ',
 },

 {
   id: 4,
   title: "cupcake",
   category: "cupcake",
   price: 15,
   img: "./img/cupcake2.jpeg",
   desc: ' bldakfjldasjfl bladkjflakdflk vakldjfldsjlfaajdslf ',
 },

 {
   id: 5,
   title: "sweet",
   category: "sweet",
   price: 15,
   img: "./img/sweet.jpeg",
   desc: ' bldakfjldasjfl bladkjflakdflk vakldjfldsjlfaajdslf ',
 },

 {
   id: 6,
   title: "dougnut",
   category: "dougnut",
   price: 15,
   img: "./img/dougnut.jpeg",
   desc: ' bldakfjldasjfl bladkjflakdflk vakldjfldsjlfaajdslf ',
 },

]

const sectionCenter = document.querySelector(".section-center");
const filterBtns = document.querySelectorAll(".filter-btn");


window.addEventListener("DOMContentLoaded", function () {
 displayMenuItem(menu);
})

filterBtns.forEach(function (btn) {
  btn.addEventListener("click", function (e) {
   const category = e.currentTarget.dataset.id;
   const menuCategory = menu.filter(function (menuItem) {
     if(menuItem.category === category){
     return menuItem;
   }

   });
   //console.log(menuCategory);
   if(category === "All"){
     displayMenuItem(menu);
   }else {
     displayMenuItem(menuCategory);
   }
  })

})



function displayMenuItem(menuItems) {
  let displayMenu = menu.map(function(item) {

    //console.log(item);
    return ` <article class="menu-item">
        <img src=${item.img} alt="">
        <div class="item-info">
          <header>
            <h4>${item.title}</h4>
            <h4>$${item.price}</h4>
          </header>
          <p class="itme-text">${item.desc}</p>
     </article>`;

  })
 displayMenu = displayMenu.join('');
 sectionCenter.innerHTML = displayMenu;
}

[kevinSmith]

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

[kevinSmith]

function displayMenuItem(menuItems) {
  let displayMenu = menu.map(function (item) {

What do you want to map over there?