Estoy aprendiendo Reaccionar con ganchos y contexto. Aprender haciendo una aplicación CRUD simple. Tengo funciones que me permiten AGREGAR notas, BORRAR notas, Filtrar si es importante, Cambiar importancia en algún contexto. Hasta aquí todo bien. Sin embargo, estoy atascado en cómo podría editar mi nota. He buscado en línea y todos los tutoriales CRUD de react hooks parecen ser simplemente agregar y eliminar.

Mis funciones para una aplicación de toma de notas CRUD a continuación.

import React, { createContext, useState, useEffect } from 'react'; import uuid from 'uuid/v1'; export const NotesContext = createContext(); const NotesContextProvider = (props) ={amp}gt; { const [notes, setNotes] = useState([]); const [showAll, setShowAll] = useState(true); const notesToShow = showAll ? notes : notes.filter((note) ={amp}gt; note.important); //CRUD operations // Create const addNote = (content) ={amp}gt; { setNotes([ ...notes, { content, id: uuid(), important: false } ]); }; // Update const toggleImportance = (noteId) ={amp}gt; { const updatedNotes = notes.map((note) ={amp}gt; note.id === noteId ? { ...note, important: !note.important } : note ); setNotes(updatedNotes); }; // Delete const removeNote = (id) ={amp}gt; { setNotes(notes.filter((note) ={amp}gt; note.id !== id)); }; // Get any notes stored in local storage useEffect(() ={amp}gt; { const data = localStorage.getItem('notes'); if (data) { setNotes(JSON.parse(data)); } }, []); // save notes to local storage useEffect(() ={amp}gt; { localStorage.setItem('notes', JSON.stringify(notes)); }, [notes]); return ( {amp}lt;NotesContext.Provider value={{ addNote, removeNote, notes, showAll, setShowAll, notesToShow, toggleImportance }}{amp}gt; {props.children} {amp}lt;/NotesContext.Provider{amp}gt; ); }; export default NotesContextProvider; 

Espero tener un onClick en un botón de edición en mi nota / todo y me permitirá actualizar la nota / todo.

Gracias cualquier orientación sería apreciada.