Question

I m trying to get my menu to show when I click the sidebar, but I m getting an error "react-dom.development.js:86 Warning: React does not recognize the handleClick prop on a DOM "

import { useState } from "react";
import { NavLink } from "react-router-dom";
import { RiCloseLine } from "react-icons/ri";
import { HiOutlineMenu } from "react-icons/hi";
import { logo } from "..//assets";
import { links } from "../assets/constants";

const NavLinks = ({ handleClick }) => (
  <div className="mt-10 ">
    {links.map((item) => (
      <NavLink
        className="flex flex-row justify-start items-center my-8 text-sm font-medium text-gray-400 hover:text-cyan-400"
        key={item.key}
        to={item.to}
        onClick={() => handleClick && handleClick()}
      >
        <item.icon className="w-6 h-6 mr-2" />
        {item.name}
      </NavLink>
    ))}
  </div>
);

const Sidebar = () => {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  return (
    <>
      <div className="md:flex hidden flex-col w-[240px] py-10 px-4 bg-[#191624]">
        <img src={logo} alt="logo" className="w-full h-14 object-contain" />
        <NavLinks />
      </div>
      <div className="absolute md:hidden block top-6 right-3 ">
        {mobileMenuOpen ? (
          <RiCloseLine
            className="w-6 h-6 text-white mr-2"
            handleClick={() => setMobileMenuOpen(false)}
          />
        ) : (
          <HiOutlineMenu
            className="w-6 h-6 text-white mr-2"
            handleClick={() => setMobileMenuOpen(true)}
          />
        )}
      </div>
      <div
        className={`absolute top-0 h-screen w-2/3 bg-gradient-to-tl from-white/10 to-[#483d8b] backdrop-blur-lg z-10 p-6 md:hidden smooth-transition
        ${mobileMenuOpen ? "left-0" : "-left-full"}`}
      >
        <img src={logo} alt="logo" className="w-full h-14 object-contain" />
        <NavLinks handleClick={() => setMobileMenuOpen(false)} />
      </div>
    </>
  );
};

export default Sidebar;

I m sure I m missing a syntax issue, but I after redoing it 3 times I can t find it.

Answer 1

The complete warning is:

Warning: React does not recognize the handleClick prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase handleclick instead. If you accidentally passed it from a parent component, remove it from the DOM element.
at svg
at IconBase
at HiOutlineMenu
at div
at Sidebar (https://gvq8pm.csb.app/src/App.js:42:67)
at div
at App
at Router (https://gvq8pm.csb.app/node_modules/react-router/dist/index.js:911:18)
at BrowserRouter (https://gvq8pm.csb.app/node_modules/react-router-dom/dist/index.js:627:18)

The react-icon icon components are leaking the handleClick prop out to the DOM and since it s a non-standard prop/attribute it generates the warning. Use the onClick prop instead, which I think you likely meant to use anyway since handleClick doesn t toggle anything.

{mobileMenuOpen ? (
  <RiCloseLine
    className="w-6 h-6 text-white mr-2"
    onClick={() => setMobileMenuOpen(false)}
  />
) : (
  <HiOutlineMenu
    className="w-6 h-6 text-white mr-2"
    onClick={() => setMobileMenuOpen(true)}
  />
)}

友情链接