49 - Notes App

Description

Create a single-page React application that allows users to add, edit, and delete personal notes.

• Display a list of existing notes.

• Enable adding new notes with title and content.

• Allow editing existing notes.

• Provide functionality to delete notes.

• Offer optional search or filtering capabilities.

Algorithm

1. Store notes in an array within React state.

2. Render a list of notes using the NoteList component.

3. Implement a NoteForm component for adding and editing notes.

4. Update the state array when notes are added, edited, or deleted.

5. Trigger form opening and note updates based on user interactions.

6. (Optional) Persist notes in local storage for data preservation.

Code

import React, { useState } from 'react';
import NoteList from './NoteList';
import NoteForm from './NoteForm';

const App = () => {
  const [notes, setNotes] = useState([]); // Stores an array of note objects

  const addNote = (newNote) => {
    setNotes([...notes, newNote]); // Add new note to the state array
  };

  const updateNote = (updatedNote) => {
    // Update the specific note object in the state array
    const updatedNotes = notes.map((note) => (note.id === updatedNote.id ? updatedNote : note));
    setNotes(updatedNotes);
  };

  const deleteNote = (noteId) => {
    // Filter out the note with the provided ID from the state array
    const filteredNotes = notes.filter((note) => note.id !== noteId);
    setNotes(filteredNotes);
  };

  return (
    <div className="App">
      <h1>My Notes</h1>
      <NoteList notes={notes} onEdit={updateNote} onDelete={deleteNote} />
      <NoteForm onAdd={addNote} />
    </div>
  );
};

export default App;

const NoteList = ({ notes, onEdit, onDelete }) => {
  return (
    <ul>
      {notes.map((note) => (
        <li key={note.id}>
          <h3>{note.title}</h3>
          <p>{note.content.slice(0, 50)}</p>
          <button onClick={() => onEdit(note)}>Edit</button>
          <button onClick={() => onDelete(note.id)}>Delete</button>
        </li>
      ))}
    </ul>
  );
};

export default NoteList;

const NoteForm = ({ onAdd }) => {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    onAdd({ title, content }); // Create a new note object and invoke addNote function from App
    setTitle(''); // Clear form inputs after adding a note
    setContent('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>Add a new note</h2>
      <label htmlFor="title">Title:</label>
      <input type="text" id="title" value={title} onChange={(e) => setTitle(e.target.value)} />
      <label htmlFor="content">Content:</label>
      <textarea id="content" value={content} onChange={(e) => setContent(e.target.value)} />
      <button type="submit">Save</button>
    </form>
  );
};

export default NoteForm;

Explanation

• App.js:

  • Uses useState hook to store the notes array in state.

  • Provides functions for adding, editing, and deleting notes, updating the state accordingly.

  • Renders the NoteList and NoteForm components.

• NoteList.js:

  • Iterates through the notes array and displays each note title and content snippet.

  • Provides edit and delete buttons for each note, triggering state updates in App.

• NoteForm.js:

  • Manages input fields for the note title and content using local state.

  • Submitting the form creates a new note object and calls the addNote function from App.

  • Clears the form fields after adding a note.

Additional Notes

This is a basic example, and you can further customize it by:

• Adding validation for the form inputs.

• Implementing the updateNote function in NoteForm for editing existing notes.

• Enhancing the NoteList with custom styling and visual cues.

• Expanding the Note object with additional fields like timestamps or tags.

• Incorporating search or filtering functionalities based on note content or tags.