I am making a Navbar for my dashboard but encountered this error which says I should pass a string to className and not function . I am passing the function to className as I have to check if the navbar is open or not. How can I solve this error?

Here is my code for navbar:

//STYLES
import styles from "./Navbar.module.scss";
import React from 'react';
//CONTEXT
import { useContext } from "react";
import NavContext from "../../context/NavContext";

//REACT ROUTER
import { NavLink } from "react-router-dom";

//ICONS
import {
  MdOutlineDashboard,
  MdOutlineAnalytics,
  MdOutlinedFlag,
  MdPeopleOutline,
  MdOutlineMessage,
  MdOutlineLogout,
} from "react-icons/md";

import {  FaTimes } from "react-icons/fa";
import { BsThreeDots } from "react-icons/bs";
import { VscDashboard } from "react-icons/vsc";

const NavUrl = ({ url, icon, description }) => {
  const { nav, setNav } = useContext(NavContext);
  const checkWindowSize = () => {
    if (window.innerWidth < 1024) setNav(!nav);
  };

  return (
    <li className={styles.li_navlink}>
      <NavLink
        to={`${url}`}
        className={({ isActive }) => (isActive ? styles.active : undefined)}
        onClick={() => checkWindowSize()}
      >
        {icon}
        <span className={styles.description}>{description}</span>
      </NavLink>
    </li>
  );
};

const Navbar = () => {
  const { nav, setNav } = useContext(NavContext);

  return (
    <div
      className={`${styles.navbar_container} ${
        nav ? styles.navbar_mobile_active : undefined
      }`}
    >
      <nav className={nav ? undefined : styles.nav_small}>
        {/* LOGO */}
        <div className={styles.logo}>
          <VscDashboard className={styles.logo_icon} />
          <FaTimes
            className={styles.mobile_cancel_icon}
            onClick={() => {
              setNav(!nav);
            }}
          />
        </div>

        {/* MENU */}
        <ul className={styles.menu_container}>
          {/* FIRST CATEGORY */}
          <span className={styles.categories}>
            {nav ? "Pages" : <BsThreeDots />}
          </span>

          <NavUrl
            url="/"
            icon={<MdOutlineDashboard />}
            description="Dashboard"
          />
          <NavUrl
            url="usage"
            icon={<MdOutlineAnalytics />}
            description="Usage"
          />
          <NavUrl
            url="plan"
            icon={<MdOutlinedFlag />}
            description="Plan"
          />
          <NavUrl url="documentation" icon={<MdPeopleOutline />} description="Documentation" />

          <NavUrl
            url="invoices"
            icon={<MdOutlineMessage />}
            description="Invoices"
          />
        </ul>

        {/* LOGOUT BUTTON */}
        <div
          className={`${styles.btn_logout}`}
          onClick={() => {
            setNav(!nav);
          }}
        >
          <MdOutlineLogout />
        </div>
      </nav>

      <div
        className={nav ? styles.mobile_nav_background_active : undefined}
        onClick={() => {
          setNav(!nav);
        }}
      ></div>
    </div>
  );
};

export default Navbar;

Here is my error which is saying to pass string in navlink , navurl ,ul , nav , navbar , div , App , route , switch , router , browserRouter classes :

index.js:1 Warning: Failed prop type: Invalid prop `className` of type 
   `function` supplied to `NavLink`, expected `string`.
    in NavLink (at Navbar.jsx:33)
    in NavUrl (at Navbar.jsx:73)
    in ul (at Navbar.jsx:67)
    in nav (at Navbar.jsx:54)
    in div (at Navbar.jsx:49)
    in Navbar (at App.jsx:24)
    in div (at App.jsx:21)
    in App (at src/index.js:19)
    in Route (at src/index.js:19)
    in Switch (at src/index.js:18)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:17)

CodePudding user response：

I think you do it in the last div you have

<div
        className={nav ? styles.mobile_nav_background_active : undefined}
        onClick={() => {
          setNav(!nav);
        }}
      ></div>

may be you must use onMouseEnter

onMouseEnter={() => {
          setisActive (true);
        }}
onMouseLeave={() => {
          setisActive (false);
        }}
className={isActive ? styles.active : undefined}