[React] non-boolean 콘솔 에러: "Warning: Received false for a non-boolean attribute className."

"Warning: Received false for a non-boolean attribute className."

 

className에 boolean 형태의 값을 받았다는건데 아무리 검색해봐도 boolean을 갖고 있는 형태는 들어가있지 않았다.

구글링해보니, &&연산자를 사용해도 동일한 에러를 발견할 수 있다는 결과가 있었고 실제로 &&연산자를 사용하고 있었다.

 

// ❌ This will throw the above error
<Component className={hidden && 'hidden'} />

// ✔️ Use a ternary instead
<Component className={hidden ? 'hidden' : undefined}  />

 

&& 연산자를 삼항연산자로 변경하니 에러는 사라졌다!

className={state && value} 인 경우에는 state가 false일 때도 있으므로 boolean 값이 들어가 이게 오류의 원인이었던것,

 

 

https://webtips.dev/solutions/fix-received-false-for-non-boolean-attribute