Step 2

Let's start by a adding a simple form to AddNote.js:

import { FormControl, TextField, Button } from "@material-ui/core";

function AddNote() {
  return (
    <form>
      <FormControl fullWidth>
        <TextField label="Title" variant="outlined" />
      </FormControl>
      <FormControl fullWidth>
        <TextField label="Text" multiline rows={4} variant="outlined" />
      </FormControl>
      <div>
        <Button type="button" color="secondary">
          Cancel
        </Button>
        <Button type="submit" color="primary">
          Submit
        </Button>
      </div>
    </form>
  );
}

export default AddNote;

Import the component in the App.js:

import AddNote from "./pages/AddNote";

Update the App.render method:

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

Save the files and visit the running React app:

As it can be seen, the form is loaded under the notes. We don't want the form to display all of the time, rather show up only when the + button is clicked.