Correctly destructure component in withBreadcrumbs.js

[jzucadi]

Within the file: withBreadcrumbs.js, I am trying to destructure the follow section:

const render = ({ breadcrumb, match, location, ...rest }) => { const componentProps = { match, location, key: match.url, ...rest }; if (typeof breadcrumb === 'function') { return createElement(breadcrumb, componentProps); } return createElement('span', componentProps, breadcrumb); };

My problem is that this component gets lumped into rest and then outputted into the span where it throws a console warning (due to some other internal workings in my app that don't have anything to do with breadcrumbs). Any insight is appreciated

[icd2k3]

Hey @jzucadi, out of curiosity, what is the console warning you're seeing? Thanks!

[jzucadi]

Thanks for making a great HOC!

My error is as follow:
react-dom.development.js?61bb:506 Warning: Invalid value for prop component on <span> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://fb.me/react-attribute-behavior in span in a (created by Link) in Link (created by Breadcrumbs) in div (created by Breadcrumbs) in div (created by Breadcrumbs) in div (created by Breadcrumbs) in Breadcrumbs in Unknown (created by Route) in Route (created by withRouter()) in withRouter() (created by App) in div (created by App) in div (created by App) in div (created by App) in App (created by Connect(App)) in Connect(App) (created by withSaga(Connect(App))) in withSaga(Connect(App)) (created by withReducer(withSaga(Connect(App)))) in withReducer(withSaga(Connect(App))) (created by withReducer(withReducer(withSaga(Connect(App))))) in withReducer(withReducer(withSaga(Connect(App)))) (created by Route) in Route (created by withRouter(withReducer(withReducer(withSaga(Connect(App)))))) in withRouter(withReducer(withReducer(withSaga(Connect(App))))) in Router (created by ConnectedRouter) in ConnectedRouter (created by Connect(ConnectedRouter)) in Connect(ConnectedRouter) in Provider warningWithoutStack @ react-dom.development.js?61bb:506 browser.js?34eb:183 Portal_UI:trace Topics::actions +0ms Executed getTopicCategories function

[jzucadi]

[icd2k3]

Thank you for reporting!

I did some testing and I'm seeing this warning as well... flagging this as a bug and I will look into a fix in the near future.

[icd2k3]

You should no longer see this component warning in version 2.3.2!

However, this did highlight a more interesting issue that will need a bit of a refactor. I've detailed it in the PR notes and will start thinking about a more permanent solution to this kind of problem.

[jzucadi]

Thank you, that was such a fast turn around. Very much appreciated, I thought there was something on my end with my middleware. Do you have a patreon or one of those?

[icd2k3]

Hey, no worries! I don't have a patreon, just happy to help. Your report also helped me identify a deeper design issue I'd like to fix soon, so this was valuable to me as well.

Let me know if you run into something else, cheers! 🍻