In my React application, there is a file called EditTodos.js that is responsible for updating the to-do list. When I click on the "Edit" button, it triggers a pop-up modal component.
import React, { useState } from "react";
import { Button, Modal } from "react-bootstrap";
export default function EditTodo({ todo }) {
const [description, setDescription] = useState(todo.description);
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const updateDescription = async () => {
try {
const body = { description };
const update = fetch(`http://localhost:3000/${todo.todo_id}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(body),
});
} catch (error) {
console.log(error.message);
}
};
return (
<>
<Button
variant="warning"
onClick={handleShow}
data-target={`#id${todo.todo_id}`}
>
Edit
</Button>
<Modal show={show} onHide={handleClose} id={`id${todo.todo_id}`}>
<Modal.Header closeButton>
<Modal.Title>Edit Todo</Modal.Title>
</Modal.Header>
<Modal.Body>
<input
type="text"
className="form-control"
value={todo.description}
onChange={(e) => setDescription(e.target.value)}
/>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
I am currently experiencing an issue where I'm unable to change the value of the input field.
I've tried using
onChange={(e) => setDescription(e.target.value)}Please assist me in figuring out what might be going wrong here.