Step 9

As per our wireframe, we want our notes to be collapsible. Inspired by the Material UI documentation for Nested List, I have updated the Note component as follows:

import React, { Component } from "react";
import { Collapse, List, ListItem, ListItemText, ListItemIcon } from "@material-ui/core";
import { ExpandLess, ExpandMore } from "@material-ui/icons";

class Note extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
    };
  }

  handleClick = () => {
    this.setState({ open: !this.state.open });
  };

  render() {
    const { note } = this.props;
    const { open } = this.state;

    return (
      <>
        <ListItem onClick={this.handleClick}>
        <ListItemIcon>
          { open ? <ExpandLess /> : <ExpandMore />}
        </ListItemIcon>
          <ListItemText primary={note.title} />
        </ListItem>
        <Collapse in={open} timeout="auto" unmountOnExit>
          <List component="div" disablePadding>
            <ListItemText secondary={note.text} />
          </List>
        </Collapse>
      </>
    );
  }
}

export default Note;

Notice the component must hold "state" to know if it is collapsed "open" or "close."

Save the file and visit the running application.