Step 8

Let's create the Note component! Update the Note.js file as follows:

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

function Note(props) {
  const { note } = props;

  return (
    <ListItem>
      <ListItemText primary={note.title} secondary={note.text} />
    </ListItem>
  );
}

export default Note;

Add the following import statements to the App.js:

import { Container, List } from "@material-ui/core";
import Note from "./components/Note";

Finally, update the render method in the App component:

  render() {
    const { notes } = this.state;
    return (
      <Container>
        <List>
          {notes.map((note, index) => {
            return <Note note={note} key={index} />;
          })}
        </List>
      </Container>
    );
  }

Save the file and visit the React app.