icd2k3/react-router-breadcrumbs-hoc

Correctly destructure component in withBreadcrumbs.js

jzucadi opened this issue · 7 comments

jzucadi commented

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 commented

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

jzucadi commented

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

icd2k3 commented

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.

  • 👍1
icd2k3 commented

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 commented

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 commented

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! 🍻

  • 🎉1