Props filter doesn't work with `as`
See original GitHub issueHere’s a reproduction. Note the console error:
Warning: Invalid value for prop `as` on <a> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://reactjs.org/link/attribute-behavior
at a
at Link
at a (webpack-internal:///./node_modules/goober/dist/goober.modern.js:10:1940)
at IndexPage
at App (webpack-internal:///./node_modules/next/dist/pages/_app.js:75:5)
at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:26:47)
at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:86:23)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:160:5)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:648:24)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:784:25)
How it works:
- Setup
shouldForwardProps((prop) => prop !== 'as')
- Create a goober styled component. (e.g. Div)
- Use the component,
as={FuncComponent}
(e.g. Link)
Error: as
is still passed through. In this case, to an a
.
I have tried other variations as well. For instance, I can explicitly filter !prop.startsWith('$')
, and yet props like $hello
still pass through to the as
component. I checked the filter function logic, and it really is returning false
for the bad props.
The strange thing here is that in the code, it really looks like it should be doing the right thing.
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (4 by maintainers)
Top Results From Across the Web
React: props.filter not working even though data is accessible
You should define tasks in your useState as array like this: const [tasks, setTasks] = useState([ { name: 'Example 1', id: 1, ...
Read more >React interactivity: Editing, filtering, conditional rendering
We don't have a user interface for editing the name of a task yet. ... Pass editTask into our <Todo /> components as...
Read more >Search filter does not work across the react-table on setState
But I recommend you to merge your searchComponent and your searchColumnComponent into one and just check if the props columnName is empty (= ......
Read more >Why am I unable to filter logs using props.conf - Splunk Answers
Props and transforms don't work on a Universal forwarder, since these features are only supported by a Splunk enterprise version (Heavy ...
Read more >React Filter: Filtering Arrays in React (With Examples)
Then, we specify the array for which we want to perform the filter function on. Because we are performing a function we open...
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
Also,
shouldForwardProp
really needs to be moved perstyled
call 😬 . What do you think? This will be a breaking change, which would call for a major3
version.This got fixed not sure why it didn’t autoclosed 🤷