javascript - Warning: Received `false` for a non-boolean attribute `className`. If you want to write it to the DOM, pass a strin

I know many people have already questioned the same question but none of their answer worked for me anyways...

Im having this error:

If you want to write it to the DOM, pass a string instead: className="false" or className={value.toString()}.

If you used to conditionally omit it with className={condition && value}, pass className={condition ? value : undefined} instead.
    at a
    at Link (webpack-internal:///./node_modules/next/dist/client/link.js:79:19)
    at li
    at SellerSidebarData (webpack-internal:///./ponents/sellerp/SSData.js:17:3)
    at ul
    at div
    at div
    at SellerSidebar (webpack-internal:///./ponents/sellerp/SellerSidebar.js:31:20)
    at div
    at SellerLayout (webpack-internal:///./ponents/sellerp/SellerLayout.js:22:3)
    at MyApp (webpack-internal:///./pages/_app.js:55:3)
    at AppContainer (/node_modules/next/dist/next-server/server/render.js:27:952)

And this is my code :

import React from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';

const SellerSidebarData = ({ classPath, path, icon, title }) => {
  const router = useRouter();

  return (
    <li>
      <Link href={path}>
        <a
          className={
            router.pathname == classPath &&
            'wave-effect waves-effect waves-button active'
          }
        >
          <i aria-hidden className={`width18 textCenter ${icon}`}></i>
          {title}
        </a>
      </Link>
    </li>
  );
};

export default SellerSidebarData;

Btw, i know that there is error on three files but if you could just answer the code i gave i most possibly answer the other files... Thank you so much in advance!!!

I know many people have already questioned the same question but none of their answer worked for me anyways...

Im having this error:

If you want to write it to the DOM, pass a string instead: className="false" or className={value.toString()}.

If you used to conditionally omit it with className={condition && value}, pass className={condition ? value : undefined} instead.
    at a
    at Link (webpack-internal:///./node_modules/next/dist/client/link.js:79:19)
    at li
    at SellerSidebarData (webpack-internal:///./ponents/sellerp/SSData.js:17:3)
    at ul
    at div
    at div
    at SellerSidebar (webpack-internal:///./ponents/sellerp/SellerSidebar.js:31:20)
    at div
    at SellerLayout (webpack-internal:///./ponents/sellerp/SellerLayout.js:22:3)
    at MyApp (webpack-internal:///./pages/_app.js:55:3)
    at AppContainer (/node_modules/next/dist/next-server/server/render.js:27:952)

And this is my code :

import React from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';

const SellerSidebarData = ({ classPath, path, icon, title }) => {
  const router = useRouter();

  return (
    <li>
      <Link href={path}>
        <a
          className={
            router.pathname == classPath &&
            'wave-effect waves-effect waves-button active'
          }
        >
          <i aria-hidden className={`width18 textCenter ${icon}`}></i>
          {title}
        </a>
      </Link>
    </li>
  );
};

export default SellerSidebarData;

Btw, i know that there is error on three files but if you could just answer the code i gave i most possibly answer the other files... Thank you so much in advance!!!

• javascript
• reactjs
• next.js

Share Improve this question Follow asked Jul 13, 2021 at 6:20 user13423237user13423237 1

• 1 If you used to conditionally omit it with className={condition && value}, pass className={condition ? value : undefined} instead. – PsyGik Commented Jul 13, 2021 at 6:34

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You are leaking a boolean to the DOM when router.pathname == classPath evaluates false. Use a ternary to return an empty string classname for the falsey path.

<Link href={path}>
  <a
    className={
      router.pathname === classPath ?
      'wave-effect waves-effect waves-button active' : ''
    }
  >
    <i aria-hidden className={`width18 textCenter ${icon}`}></i>
    {title}
  </a>
</Link>

<a className={
   router.pathname == classPath ?
   'wave-effect waves-effect waves-button active':''
   }
>