Step 1

At the moment, the landing page is implemented directly in the App.js. So, let's refactor the code and extract the relevant sections to the DisplayNotes page.

First update the DisplayNotes.js as follows:

import { List, Fab, withStyles } from "@material-ui/core";
import { Add } from "@material-ui/icons";
import Note from "../components/Note";

const styles = {
  fab: {
    position: 'absolute',
    bottom: "2rem",
    right: "2rem",
  }
};

function DisplayNotes(props) {
  const { notes, deleteNote, classes } = props;
  return (
    <>
      <List>
        {notes.map((note, index) => {
          return <Note note={note} key={index} deleteNote={deleteNote} />;
        })}
      </List>
      <Fab aria-label={"Add"} className={classes.fab}>
        <Add />
      </Fab>
    </>
  );
}

export default withStyles(styles)(DisplayNotes);

Next, update App.js:

import React, { Component } from "react";
import { Container } from "@material-ui/core";
import DisplayNotes from "./pages/DisplayNotes";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      notes: [ /* Data not shown to save space */ ],
    };
  }

  deleteNote = (note) => {
    this.setState((state) => {
      return {
        notes: state.notes.filter((n) => n.id !== note.id),
      };
    });
  };

  render() {
    const { notes } = this.state;
    return (
      <Container>
        <DisplayNotes notes={notes} deleteNote={this.deleteNote} />
      </Container>
    );
  }
}

export default App;

Save the files and run the React app. Of course, the application must look and work the same as before!