Create a Notes App with React and JavaScript

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a notes app with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app notes

with NPM to create our React project.

We also need to add the uuid library to assign a unique ID to each note entry.

To install it, we run:

npm i uuid

Create the Notes App

To create the notes app, we write:

import React, { useMemo, useState } from "react";
import { v4 as uuidv4 } from "uuid";

export default function App() {
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [keyword, setKeyword] = useState("");
  const [notes, setNotes] = useState([]);

  const add = (e) => {
    e.preventDefault();
    setNotes((notes) => [
      ...notes,
      {
        id: uuidv4(),
        title,
        description
      }
    ]);
  };

  const remove = (index) => {
    setNotes((notes) => notes.filter((_, i) => i !== index));
  };

  const filteredNotes = useMemo(() => {
    if (!keyword) {
      return notes;
    }
    return notes.filter(({ title, description }) => {
      return title.includes(keyword) || description.includes(keyword);
    });
  }, [keyword, notes]);

  return (
    <div>
      <form onSubmit={add}>
        <h1>add note</h1>
        <div>
          <label>title</label>
          <input value={title} onChange={(e) => setTitle(e.target.value)} />
        </div>
        <div>
          <label>description</label>
          <input
            value={description}
            onChange={(e) => setDescription(e.target.value)}
          />
        </div>
        <button type="submit">add</button>
      </form>

      <form>
        <h1>search</h1>
        <div>
          <label>keyword</label>
          <input value={keyword} onChange={(e) => setKeyword(e.target.value)} />
        </div>
      </form>
      {filteredNotes.map((note, index) => {
        return (
          <div key={note.id}>
            <h2>{note.title}</h2>
            <p>{note.description}</p>
            <button type="button" onClick={() => remove(index)}>
              remove
            </button>
          </div>
        );
      })}
    </div>
  );
}

We have the title , description , keyword , and notes states.

title and description have the content for the notes.

keyword is the keyword for searching the notes.

We create them all with the useState hook.

Then we add the add function to add a note.

We call e.preventDefault to do client-side form submission.

Then we call setNotes to add the note entry to the notes array.

We do this by passing in a callback to the setNotes function.

We get the notes value from the callback parameter, then we return an array with the entry added to the end.

We call uuidv4 to assign the unique ID for the entry.

Next, we create the remove function to get the index and call setNotes with a callback to remove the entry.

In the callback, we call filter to return a notes array without the given index .

Then we define the filteredNotes variable with the useMemo hook to return the notes array filtered by keyword .

The 2nd array has the values to watch for in order for the returned value to update.

Below that,. we have the form with the onSubmit prop that’s triggered by the button with type submit ,

The inputs set the title and description respectively.

value are set to the states. And onChange set the title and description states with a function.

e.target.value has the inputted value.

Likewise, we have similar inputs for the 2nd form.

Then finally, we rendered the filteredNotes into divs.

We set the key prop to a unique ID.

And each div has a button that calls remove when we click the remove button.

Conclusion

We can create a notes app easily with React and JavaScript.