If you are a front-end developer, you may have encountered this warning message in your browser console: Warning: Received true for a non-boolean attribute someAttribute. This means that you have passed a boolean value (true or false) to an attribute that expects a different type of value, such as a string or a number. This can cause unexpected behavior or errors in your application.
In this blog post, I will explain why this warning occurs, how to fix it, and how to avoid it in the future. I will also provide some sources where you can learn more about React attributes and their types.
Why does this warning occur?
React uses attributes to pass data and event handlers to components. Attributes are similar to HTML attributes, but they have some differences. For example, some HTML attributes are reserved for React, such as className and htmlFor. Some HTML attributes have different names in React, such as tabIndex and dangerouslySetInnerHTML. And some HTML attributes have different types in React, such as checked and value.
When you pass an attribute to a component, React checks if the attribute name and value match the expected type. If they don’t, React will show a warning message in the browser console. This is to help you catch potential bugs and improve your code quality.
One common case where this warning occurs is when you pass a boolean value to an attribute that expects a string or a number. For example, if you write something like this:
<input type="text" disabled={true} />
React will show this warning message:
Warning: Received true for a non-boolean attribute disabled.
This is because the disabled attribute expects a string value, not a boolean value. In HTML, the presence of an attribute means that it is true, and the absence of an attribute means that it is false. So, if you want to disable an input element, you just need to write disabled without any value:
<input type="text" disabled />
How to fix it?
To fix this warning, you need to pass the correct type of value to the attribute. In most cases, this means removing the boolean value and just writing the attribute name. For example, instead of writing:
<input type="text" disabled={true} />
You should write:
<input type="text" disabled />
However, there are some cases where you may want to conditionally render an attribute based on a boolean value. For example, if you have a state variable called isDisabled that determines whether an input element should be disabled or not, you may write something like this:
<input type="text" disabled={isDisabled} />
In this case, you cannot just remove the boolean value, because you want to dynamically change the attribute based on the state. So, how can you fix this warning without losing the functionality?
One way is to use a ternary operator and pass an empty string as the false value. For example:
<input type="text" disabled={isDisabled ? true : ""} />
This way, when isDisabled is true, React will render the disabled attribute with no value, which is equivalent to writing disabled. When isDisabled is false, React will render the disabled attribute with an empty string as the value, which is equivalent to not writing disabled at all.
Another way is to use a logical AND operator and pass the attribute name as the true value. For example:
<input type="text" {...(isDisabled && {disabled: true})} />
This way, when isDisabled is true, React will spread the object {disabled: true} as an attribute, which is equivalent to writing disabled={true}. When isDisabled is false, React will spread nothing as an attribute, which is equivalent to not writing disabled at all.
How to avoid it in the future?
To avoid this warning in the future, you need to know what type of value each attribute expects. You can find this information in the React documentation or in other sources online. Here are some links where you can learn more about React attributes and their types:
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
https://www.w3schools.com/tags/ref_attributes.asp
By following these guidelines and best practices, you can write better code and avoid unnecessary warnings in your browser console.