Question 224847 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Error !: setShowCatMenu is not a function

So, i was solving this problem but i didn’t find the solution. The error is I cannot get the setShowCatMenu as a function type: Code Below

Menu.jsx

import React from 'react';
import Link from 'next/link';
import { BsChevronDown } from 'react-icons/bs';

const data = [
  { id: 1, name: 'Home', url: '/' },
  { id: 2, name: 'About', url: '/about' },
  { id: 3, name: 'Categories', subMenu: true },
  { id: 4, name: 'Contact', url: '/contact' },
];

const subMenuData = [
  { id: 1, name: 'Jordan', doc_count: 11 },
  { id: 2, name: 'Sneakers', doc_count: 8 },
  { id: 3, name: 'Running shoes', doc_count: 64 },
  { id: 4, name: 'Football shoes', doc_count: 107 },
];

const Menu = ({ showCatMenu, setShowCatMenu }) => {
  return (
    <ul className="hidden md:flex items-center gap-8 font-medium text-black">
      {data.map((item) => {
        return (
          <React.Fragment key={item.id}>
            {!!item?.subMenu ? (
              <li
                className="cursor-pointer flex items-center gap-2 relative"
                onMouseEnter={() => setShowCatMenu(true)}
                onMouseLeave={() => setShowCatMenu(false)}
              >
                {item.name}
                <BsChevronDown size={14} />

                {showCatMenu && (
                  <ul className="bg-white absolute top-6 left-0 min-w-[250px] px-1 text-black shadow-lg">
                    {subMenuData.map((submenu) => {
                      return (
                        <Link key={submenu.id} href="/">
                          <li
                            className="h-12 flex justify-between items-center px-3 hover:bg-black/[0.03]
                          rounded-md"
                          >
                            {submenu.name}
                            <span className="opacity-50 text-sm">78</span>
                          </li>
                        </Link>
                      );
                    })}
                  </ul>
                )}
              </li>
            ) : (
              <li className="cursor-pointer">
                <Link href={item?.url}>{item.name}</Link>
              </li>
            )}
          </React.Fragment>
        );
      })}
    </ul>
  );
};

export default Menu;

**

Header.jsx**

import React, { useState, useEffect } from 'react';
import Wrapper from './Wrapper';
import Menu from './Menu';

import Link from 'next/link';

const Header = () => {
  const { mobileMenu, setMobileMenu } = useState(false);
  const { showCatMenu, setShowCatMenu } = useState(false);
  const { show, setShow } = useState('translate-y-0');
  const { lastScrollY, setLastScrollY } = useState(0);

  return (
    <header
      className={`w-full h-[50px] md:h-[80px] bg-white flex items-center justify-between
       z-20 sticky top-0 transition-transform duration-300 ${show}`}
    >
      <Wrapper>
        <Link href="/">
          <img src="/logo.svg" className="w-[40px] md:w-[60]" />
        </Link>
        <Menu showCatMenu={showCatMenu} setShowCatMenu={setShowCatMenu} />
      </Wrapper>                        *         Problem Here        *
    </header>
  );
};

export default Header;

The same problem Also in the Menu.jsx File

Please can someone fix this issue, it would be greatful, thanks in advance.

I was like expecting to get the correct answer but didn’t get. Please Help!

Tags:

2

Answers


  1. 0

    As per my understanding and code review, the problem lies in how you’re initializing the state variables in your Header.jsx file. You are using useState Hook, by treating it like an object with properties. Instead, useState returns an array with two elements: the state variable and a function to update that variable.You can fix it by;

    1. Replacing all instances of {} with [] for initializing state variables.
    2. Change instances of = to = in your state variable declarations.

    Below is the corrected Header.jsx code:

    import React, { useState, useEffect } from 'react';
import Wrapper from './Wrapper';
import Menu from './Menu';
import Link from 'next/link';

const Header = () => {
  const [mobileMenu, setMobileMenu] = useState(false);
  const [showCatMenu, setShowCatMenu] = useState(false);
  const [show, setShow] = useState('translate-y-0');
  const [lastScrollY, setLastScrollY] = useState(0);

  return (
    <header
      className={`w-full h-[50px] md:h-[80px] bg-white flex items-center justify-between
       z-20 sticky top-0 transition-transform duration-300 ${show}`}
    >
      <Wrapper>
        <Link href="/">
          <img src="/logo.svg" className="w-[40px] md:w-[60]" />
        </Link>
        <Menu showCatMenu={showCatMenu} setShowCatMenu={setShowCatMenu} />
      </Wrapper>
    </header>
  );
};

export default Header;

    With these changes, your state variables will be correctly initialized using the useState hook, and you should no longer encounter the error you mentioned.

    Login or Signup to reply.
  2. 0

    As mentioned in previous post, issue is in State Initialization.

    State Initialization: When using the useState hook, you should use destructuring assignment to get the state value and its setter function. However, you’ve used destructuring incorrectly by surrounding each state variable with curly braces. It should be done like this:

    const [mobileMenu, setMobileMenu] = useState(false);
const [showCatMenu, setShowCatMenu] = useState(false);
const [show, setShow] = useState('translate-y-0');
const [lastScrollY, setLastScrollY] = useState(0);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search