I have a simple logic for check which menu is active.

I'm using:

const [activeMenu, setActiveMenu] = useState("0");

for the state.

and using if shorthand:

1. className={activeMenu === "2" && "active"}
2. className={activeMenu === "1" ? "active" : ""}

but the first one gave me:

react_devtools_backend.js:4026 Warning: Received `false` for a non-boolean attribute `className`.

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

My question is why the first one gave me that warning? but my site is still working like charm. Why is that say that received false?

CodePudding user response：

if activeMenu is not 2, then className would be false (invalid)

className={activeMenu === "2" && "active"}

with this

className={activeMenu === "2" ? "active" : ""}

if activeMenu is not 2, then className would be an empty string (valid)

So, it's basically as the error says. className is not a boolean attribute.

run the code below in console, it's basically the same thing as your code. It will return false

false && "active" !== null