BaseLink activePropName prop Boolean value causes a warning in React 16
See original GitHub issueIssue Description
The activePropName
prop on the BaseLink
component causes a warning in React 16 due to being assigned a Boolean value.
For example, this component:
<Link to='/' activePropName='active'>
will produce this warning:
Warning: Received `true` for a non-boolean attribute `active`.
If you want to write it to the DOM, pass a string instead: active="true" or active={value.toString()}.
As the warning message suggests, this can be solved by changing the prop value from a Boolean to a String.
Note: this can also be solved without a change to the codebase by using a data
attribute:
<Link to='/' activePropName='data-active'>
Issue Analytics
- State:
- Created 5 years ago
- Comments:7 (4 by maintainers)
Top Results From Across the Web
why we cannot pass boolean value as props in React , it ...
This happens if you pass the props down without taking the boolean values out of the props. E.g.: const X = props =>...
Read more >Don't Call PropTypes Warning - React
bool . This pattern by itself is fine, but triggers a false positive because React thinks you are calling PropTypes directly. The next...
Read more >Error Handling in React 16 – React Blog
As of React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree....
Read more >Unknown Prop Warning - React
The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as...
Read more >DOM Attributes in React 16
Another possible issue is that legacy HTML attributes like align and valign will now be passed to the DOM. They used to be...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Yeah, I mean, it’s the sort of thing that should probably take functional children like:
But
activePropName
is less typing, and this is a fairly common pattern anyway.Ah ok, I see - so you would always use
activePropName
with theComponent
prop and a custom anchor.This makes complete sense - thanks for clarifying!