Notes Example

App.jsx

import React, {useState} from 'react';

function Notes() {
    const [newNote, setNewNote] = useState('');
    const [notes, setNotes] = useState([
        {
            text: 'This is your first note!'
        }
    ]);
    
    // Appends a new note to the end of our list.
    const addNote = note => setNotes([...notes, note]);
    
    // Deletes a note with the provided ID.
    const deleteNote = id => setNotes(notes.splice(id, 1));
    
    return (
        <div className="note-list">
            <h1>Notes</h1>
            <input
                value={newNote}
                onChange={e => setNewNote(e.target.value)}
                placeholder="New note"
            />
            <button onClick={() => addNote({ text: newNote })}>
                Add Note
            </button>
            
            <hr />
            
            {notes.map((note, index) => (
                <Note key={index} data={note} onDelete={deleteNote} />
            ))}
        </div>
    );
}

function Note({ key, data, onDelete }) {
    const { text } = data;
    return (
        <div className="note">
            <p>{text}</p>
            <button onClick={() => onDelete(key)}>Delete</button>
        </div>
    );
}