Passing a NavLink to a Material UI component via the containerElement prop gives “Failed prop type” warning

user_6066011 0
Viewed 11970
<RaisedButton containerElement={NavLink} to="/somewhere">
   Somewhere
</RaisedButton>

Produces the following warning:

Warning: Failed prop type: Invalid prop `containerElement` supplied to `RaisedButton`.
in RaisedButton (at App.js:11)
in App (at index.js:23)
in Provider (at index.js:22)
in MuiThemeProvider (at index.js:21)

but the Navlink properly renders and redirects to /somewhere on click. If this is a deprecated prop that still works then I haven't been able to find what the new prop is called... Please advise. If nothing else I'd like to hide the warning (how?).

react-router material-ui reactjs
3 Answers

I think you need to give it the markup for the containerElement, something like this (rather than just the name of the element)

containerElement={<NavLink to="/home" />}

Give that a try and see if it works

user_39753090

The easiest solution is to put IconButton inside the Navlink, so whenever you click on the Iconbutton the NavLink is automatically clicked.

Here is a sample of the code:

<NavLink to="/" style={{ textDecoration: "none" }}>
  <IconButton>
    <Typography>Home</Typography>
  </IconButton>
</NavLink>
user_158988660
Related