Material UI — Customizing Lists

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to customize lists with Material UI.

List Controls

We can add form controls to list items.

To do that, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import Checkbox from "@material-ui/core/Checkbox";

export default function App() {
  const [checked, setChecked] = React.useState([0]);

  const handleToggle = value => () => {
    const currentIndex = checked.indexOf(value);
    const newChecked = [...checked];

    if (currentIndex === -1) {
      newChecked.push(value);
    } else {
      newChecked.splice(currentIndex, 1);
    }

    setChecked(newChecked);
  };

  return (
    <List>
      {[0, 1, 2, 3].map(value => {
        return (
          <ListItem
            key={value}
            role={undefined}
            dense
            button
            onClick={handleToggle(value)}
          >
            <ListItemIcon>
              <Checkbox
                edge="start"
                checked={checked.indexOf(value) !== -1}
                tabIndex={-1}
                disableRipple
              />
            </ListItemIcon>
            <ListItemText primary={` item ${value + 1}`} />
          </ListItem>
        );
      })}
    </List>
  );
}

to add a list with items that have a check on the left side.

We added the Checkbox inside the ListItemIcon .

The edge set to start indicates that it stays on the left side.

The onClick prop is on the ListItem .

The handleToggle function returns a function that adds the index of the checked item to the checked state.

We see if it’s checked by checking if the index is already in the checked array.

If it is, then it’s checked.

Otherwise, it’s not.

If it’s not checked, then the index is pushed into the new array.

Otherwise, we remove the item with splice from the array.

Then we call setChecked to set the state.

And then we can set the checked value of each checkbox in the checked prop of the Checkbox .

We can also add the checkbox as a secondary action:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Avatar from "@material-ui/core/Avatar";
import ListItemText from "@material-ui/core/ListItemText";
import Checkbox from "@material-ui/core/Checkbox";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";

export default function App() {
  const [checked, setChecked] = React.useState([0]);

  const handleToggle = value => () => {
    const currentIndex = checked.indexOf(value);
    const newChecked = [...checked];

    if (currentIndex === -1) {
      newChecked.push(value);
    } else {
      newChecked.splice(currentIndex, 1);
    }

    setChecked(newChecked);
  };

  return (
    <List>
      {[0, 1, 2, 3].map(value => {
        return (
          <ListItem key={value} button>
            <ListItemAvatar>
              <Avatar
                alt={`cat ${value + 1}`}
                src="http://placekitten.com/200/200"
              />
            </ListItemAvatar>
            <ListItemText primary={`item ${value + 1}`} />
            <ListItemSecondaryAction>
              <Checkbox
                edge="end"
                onChange={handleToggle(value)}
                checked={checked.indexOf(value) !== -1}
              />
            </ListItemSecondaryAction>
          </ListItem>
        );
      })}
    </List>
  );
}

We have the items listed as we do in the previous example.

ListItemAvatar displays the avatar on the left side.

And ListItemSecondaryAction displays the checkbox on the right side.

edge is set to end to display the checkbox on the right side.

The logic for the checkbox is the same.

Switch

We can add switches to a list item.

For example, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Avatar from "@material-ui/core/Avatar";
import ListItemText from "@material-ui/core/ListItemText";
import Switch from "@material-ui/core/Switch";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";

export default function App() {
  const [checked, setChecked] = React.useState([0]);

  const handleToggle = value => () => {
    const currentIndex = checked.indexOf(value);
    const newChecked = [...checked];

    if (currentIndex === -1) {
      newChecked.push(value);
    } else {
      newChecked.splice(currentIndex, 1);
    }

    setChecked(newChecked);
  };

  return (
    <List>
      {[0, 1, 2, 3].map(value => {
        return (
          <ListItem key={value} button>
            <ListItemAvatar>
              <Avatar
                alt={`cat ${value + 1}`}
                src="http://placekitten.com/200/200"
              />
            </ListItemAvatar>
            <ListItemText primary={` item ${value + 1}`} />
            <ListItemSecondaryAction>
              <Switch
                edge="end"
                onChange={handleToggle(value)}
                checked={checked.indexOf(value) !== -1}
              />
            </ListItemSecondaryAction>
          </ListItem>
        );
      })}
    </List>
  );
}

to add a switch to each list item on the right side.

All we did is replace the Checkbox with a Switch .

They take the same props.

Conclusion

We can add controls to the left or right side of the list item.

Also, we can add avatars on the left side of the list item.

Checkboxes and switches can be toggled on and off.