[Avatar] 0.15.2 - Unknown props onKeyboardFocus, iconStyle on <img> tag

[halayli]

This probably was missed out in react 15.2 prop changes.

Warning: Unknown props `onKeyboardFocus`, `iconStyle` on <img> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
    in img (created by Avatar)
    in Avatar (created by IconMenu)
    in div (created by IconMenu)
    in IconMenu (created by App)
    in div (created by AppBar)
    in div (created by Paper)
    in Paper (created by AppBar)

[oliviertassinari]

@halayli We were expecting some warnings to be catched with the latest release by users.
Do you want to submit PR to fix them?

[HenrikBechmann]

fyi release of 15.2.1 is significantly better for warnings, but still getting these:

bundle.js:70805 Warning: React.__spread is deprecated and should not be used. Use Object.assign directly or another helper function with similar semantics. You may be seeing this warning due to your compiler. See https://fb.me/react-spread-deprecation for more details.warning @ bundle.js:70805__spread @ bundle.js:104758(anonymous function) @ bundle.js:52197render @ bundle.js:52186_renderValidatedComponentWithoutOwnerOrContext @ bundle.js:107659_renderValidatedComponent @ bundle.js:107685performInitialMount @ bundle.js:107227mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786mountChildren @ bundle.js:113619_createInitialChildren @ bundle.js:108635mountComponent @ bundle.js:108460mountComponent @ bundle.js:114786mountChildren @ bundle.js:113619_createInitialChildren @ bundle.js:108635mountComponent @ bundle.js:108460mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786mountChildren @ bundle.js:113619_createInitialChildren @ bundle.js:108635mountComponent @ bundle.js:108460mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786mountChildren @ bundle.js:113619_createInitialChildren @ bundle.js:108635mountComponent @ bundle.js:108460mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786mountChildren @ bundle.js:113619_createInitialChildren @ bundle.js:108635mountComponent @ bundle.js:108460mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786mountChildren @ bundle.js:113619_createInitialChildren @ bundle.js:108635mountComponent @ bundle.js:108460mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786mountComponentIntoNode @ bundle.js:112980perform @ bundle.js:118276batchedMountComponentIntoNode @ bundle.js:113001perform @ bundle.js:118276batchedUpdates @ bundle.js:111360batchedUpdates @ bundle.js:115987_renderNewRootComponent @ bundle.js:113160_renderSubtreeIntoContainer @ bundle.js:113246render @ bundle.js:11326754../core/containers/main @ bundle.js:53231s @ bundle.js:1e @ bundle.js:1(anonymous function) @ bundle.js:1
bundle.js:70805 Warning: MenuTile: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)warning @ bundle.js:70805warnAboutAccessingKey @ bundle.js:111663render @ bundle.js:52244_renderValidatedComponentWithoutOwnerOrContext @ bundle.js:107659_renderValidatedComponent @ bundle.js:107685performInitialMount @ bundle.js:107227mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786mountChildren @ bundle.js:113619_createInitialChildren @ bundle.js:108635mountComponent @ bundle.js:108460mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786mountChildren @ bundle.js:113619_createInitialChildren @ bundle.js:108635mountComponent @ bundle.js:108460mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786mountChildren @ bundle.js:113619_createInitialChildren @ bundle.js:108635mountComponent @ bundle.js:108460mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786mountChildren @ bundle.js:113619_createInitialChildren @ bundle.js:108635mountComponent @ bundle.js:108460mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786mountComponentIntoNode @ bundle.js:112980perform @ bundle.js:118276batchedMountComponentIntoNode @ bundle.js:113001perform @ bundle.js:118276batchedUpdates @ bundle.js:111360batchedUpdates @ bundle.js:115987_renderNewRootComponent @ bundle.js:113160_renderSubtreeIntoContainer @ bundle.js:113246render @ bundle.js:11326754../core/containers/main @ bundle.js:53231s @ bundle.js:1e @ bundle.js:1(anonymous function) @ bundle.js:1
bundle.js:70805 Warning: Unknown props `actAsExpander`, `showExpandableButton` on <div> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by CardTitle)
    in CardTitle (created by Explorer)
    in div (created by Card)
    in div (created by Paper)
    in Paper (created by Card)
    in Card (created by Explorer)
    in div (created by Explorer)
    in Explorer (created by Connect(Explorer))
    in Connect(Explorer) (created by RouterContext)
    in ReactCSSTransitionGroupChild (created by ReactTransitionGroup)
    in div (created by ReactTransitionGroup)
    in ReactTransitionGroup (created by ReactCSSTransitionGroup)
    in ReactCSSTransitionGroup (created by App)
    in div (created by App)
    in App (created by RouterContext)
    in RouterContext (created by Router)
    in Router
    in div (created by Root)
    in Provider (created by Root)
    in MuiThemeProvider (created by Root)
    in Root (created by Main)
    in Mainwarning @ bundle.js:70805warnUnknownProperties @ bundle.js:110966handleElement @ bundle.js:110977onBeforeMountComponent @ bundle.js:110982(anonymous function) @ bundle.js:111021emitEvent @ bundle.js:111018onBeforeMountComponent @ bundle.js:111265mountComponent @ bundle.js:114782performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786mountChildren @ bundle.js:113619_createInitialChildren @ bundle.js:108635mountComponent @ bundle.js:108460mountComponent @ bundle.js:114786mountChildren @ bundle.js:113619_createInitialChildren @ bundle.js:108635mountComponent @ bundle.js:108460mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786mountChildren @ bundle.js:113619_createInitialChildren @ bundle.js:108635mountComponent @ bundle.js:108460mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786mountChildren @ bundle.js:113619_createInitialChildren @ bundle.js:108635mountComponent @ bundle.js:108460mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786mountChildren @ bundle.js:113619_createInitialChildren @ bundle.js:108635mountComponent @ bundle.js:108460mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786mountChildren @ bundle.js:113619_createInitialChildren @ bundle.js:108635mountComponent @ bundle.js:108460mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786performInitialMount @ bundle.js:107241mountComponent @ bundle.js:107115mountComponent @ bundle.js:114786mountComponentIntoNode @ bundle.js:112980perform @ bundle.js:118276batchedMountComponentIntoNode @ bundle.js:113001perform @ bundle.js:118276batchedUpdates @ bundle.js:111360batchedUpdates @ bundle.js:115987_renderNewRootComponent @ bundle.js:113160_renderSubtreeIntoContainer @ bundle.js:113246render @ bundle.js:11326754../core/containers/main @ bundle.js:53231s @ bundle.js:1e @ bundle.js:1(anonymous function) @ bundle.js:1
bundle.js:70805 Warning: Unknown prop `expandable` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by CardText)
    in CardText (created by Explorer)
    in div (created by Card)
    in div (created by Paper)
    in Paper (created by Card)
    in Card (created by Explorer)

hope this helps!

[halayli]

@oliviertassinari I found a couple more. Will submit a PR today/tomorrow.

[oliviertassinari]

Looks like IconMenu can't be composed with an Avatar as the current API is designed 😞 .

[prescottprue]

Any update on this? It seems like this error is still happening when trying to use Avatar with IconMenu

[crudh]

@prescottprue if it is for the iconButtonElement you should wrap it in a <IconButton>, solved it for us and I saw in the documentation that it is required.

[prescottprue]

@crudh I can't believe I missed that in the docs. Works perfectly, thanks!

This issue can probably be closed right? @oliviertassinari

[oliviertassinari]

@prescottprue Right, I think that we can close this issue. Thanks for the confirmation.

[stiofand]

Wrapping is not an option for me, due to the inherent issue with trying to override styles of spans in buttons.

I need a as an IconMenu button (from react router) or plain old , but using either of these throws this warning, this should be suppressible.