Step 13: Add Notes

Let’s update the program so a random (fake) note is generated when clicking the “Add Note” button.

Add the following method to the App component:

const add = () => {
  const note = {
    id: faker.datatype.uuid(),
    title: faker.lorem.sentence(),
    text: faker.lorem.paragraph(),
  };

  setNotes((notes) => [...notes, note]);
};

Next, pass this function to the Header component:

- <Header query={query} setQuery={setQuery} />
+ <Header query={query} setQuery={setQuery} add={add} />

Finally, update the Header.jsx as follows:

  import { IconNote } from "@tabler/icons";
  import { Grid, Button } from "@mantine/core";
  import Search from "./Search";
  import PropTypes from "prop-types";
  
  function Header(props) {
-   const { query, setQuery } = props;
+   const { query, setQuery, add } = props;
  
    const handleOnClick = () => {
+     add();
    };

    return (
      <Grid>
        <Grid.Col span={10}>
          <Search query={query} setQuery={setQuery} />
        </Grid.Col>
        <Grid.Col span={2}>
          <Button
            onClick={handleOnClick}
            fullWidth
            variant="default"
            leftIcon={<IconNote />}
          >
           Add Note
          </Button>
        </Grid.Col>
      </Grid>
    );
  }
	
  export default Header;
	
  Header.propTypes = {
    query: PropTypes.string,
    setQuery: PropTypes.func,
+   add: PropTypes.func,
  };

The results should look like this: