Sometimes, we want to add a link to a List with React Material UI.

In this article, we’ll look at how to add a link to a List with React Material UI.

How to add a link to a List with React Material UI?

To add a link to a List with React Material UI, we can set the href prop of a ListItem component.

For instance, we write:

import React from "react";
import { List, ListItem, ListItemText } from "@material-ui/core";

export default function App() {
  return (
    <div>
      <List>
        <ListItem button component="a" href="https://www.google.com">
          <ListItemText primary="Google" />
        </ListItem>
      </List>
    </div>
  );
}

We set the href prop of ListItem to a URL.

And we set the component prop to 'a' to render the list item as a link.

As a result, we should see a link rendered and it should go to https://www.google.com when we click on it.

Conclusion

To add a link to a List with React Material UI, we can set the href prop of a ListItem component.