Lightrun
question-mark

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

BaseLink activePropName prop Boolean value causes a warning in React 16

See original GitHub issue

Issue 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:closed
  • Created 5 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
taioncommented, Jan 4, 2018

Yeah, I mean, it’s the sort of thing that should probably take functional children like:

<Link to="/">
  {active => <NavItem active={active}>Whatever</NavItem>}
</Link>

But activePropName is less typing, and this is a fairly common pattern anyway.

0reactions
lukehedgercommented, Jan 4, 2018

Ah ok, I see - so you would always use activePropName with the Component prop and a custom anchor.

This makes complete sense - thanks for clarifying!

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Route params with special characters

Next page

Basename middleware with createConnectedRouter + createHistoryEnhancer