import React, { useState } from 'react';
const Quantity = ({ todo }) => {
const [count, setCount] = useState(+todo.count);
function decrementCount() {
setCount(count - 1)
updateCount(count - 1)
}
function incrementCount() {
setCount(count + 1)
updateCount(count + 1)
}
// edit count function
const updateCount = async (newCount) => {
console.log("this is the newCount", newCount)
try {
const body = { "newCount" : newCount}
const response = await fetch(
`http://localhost:5000/todos/${todo.todo_id}`,
{
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(body)
}
);
window.location = "/";
} catch (err) {
console.error(err.message);
}
}
return (
<>
<button onClick={() => decrementCount(todo.todo_id)}>-</button>
<span>{count}</span>
<button onClick= {() => incrementCount(todo.todo_id)}>+</button>
</>
)
}
export default Quantity;
I have created a counter app, however I am unable to get the incrementer and decrementer to work correctly, I have tried so many different things. Currently, whenever I change the count, the "items" in the description column gets deleted. I do not understand how this is happening. I have my current folder for this project on my github under fruitlist version 2 on my github
The issue was with your update function in index.js. Here is the updated code:
app.put("/todos/:id", async (req, res) => {
try {
const { id } = req.params;
- const { description } = req.body;
+ const { newCount } = req.body;
const updateTodo = await pool.query(
- "UPDATE todo SET description = $1 WHERE todo_id = $2",
- [description, id]
+ "UPDATE todo SET count = $1 WHERE todo_id = $2",
+ [newCount, id]
);