Tengo una aplicación crud en react js. Yo uso firebase como back-end. Tengo mi función updateddoc que funciona cuando presionas un botón. Pero solo funciona una vez. ¿Cómo puedo editar varias veces? Eliminar uno está bien.

Quiero editar mis entradas varias veces. Incluso después de actualizar la página.

Estoy usando firebase en el back-end. Entonces, ¿alguien puede ayudarme con esto?

 function App() { const [tasks,setTasks]=useState([]); let subtitle; const [modalIsOpen, setIsOpen] = React.useState(false); const [input,setInput]=useState(""); function openModal() { setIsOpen(true); } function afterOpenModal() { // references are now sync'd and can be accessed. subtitle.style.color = '#f00'; } function closeModal(e) { e.preventDefault(); setIsOpen(false); } const modal=useRef(); useEffect(()=>{ const q=query(collection(db,"tasks")); const unsub=onSnapshot(q,(querySnapshot ) =>{ let taskArray=[]; querySnapshot.forEach(doc=>{ taskArray.push({...doc.data(),id:doc.id}) }) setTasks(taskArray); }); return ()=>unsub(); },[]); const toggleComplete = async (task) => { await updateDoc(doc(db,'tasks',task.id), { title:input }); }; const handleDelete = async (id) => { await deleteDoc(doc(db, "tasks", id)); }; return ( <div className="App"> <div className="box"> <AddTask/> <div className="task-container"> {tasks.map((task)=>( <div key={task.id} className="entry"> <p className="title">{task.title}</p> <div className="modal"> <button onClick={openModal}>Edit</button> <Modal isOpen={modalIsOpen} onAfterOpen={afterOpenModal} onRequestClose={closeModal} ariaHideApp={false} style={customStyles} contentLabel="Example Modal" > <h2 ref={(_subtitle) => (subtitle = _subtitle)}>Hello</h2> <div>I am a modal</div> <form> <input value={input} onChange={event => setInput(event.target.value)}/> <button onClick={()=>toggleComplete(task)}>Edit</button> </form> </Modal> </div> <button onClick={()=>handleDelete(task.id)}>Delete</button> </div> ))} </div> </div> </div> ); }