I’m creating my second app in React and I’ve stumbled upon a problem I can’t really solve on my own (or with ChatGPT’s help).

The problem is my deleteBook function is not working. Before, after clicking on the deleteBook button, my server kept crushing with the error message saying: invalid input syntax for integer: “undefined” and now, for some reason, the button doesn’t work, like at all. Everything looks right to me and to be totally honest, after and hour of thinking about a solution, I’ve run out of any ideas I had.

I really need help with this project and I know the codes are pretty messy as I’m still a learner but I really hope somebody will be able to tell me what exactly is wrong.

Here’s the fragment of the code from my back-end (I’m using express, cors and dotenv):

app.delete('/books/:id', async (req, res) => {
    try {
        const { id } = req.params;
        const delBook = await pool.query(
            `UPDATE public.books SET status = 'true' WHERE "bookID" = $1`,
            [id]);
        res.json({ "success": true, "message": "Book deleted successfully!" });
    } catch (error) {
        res.json({ "success": false, "message": "Failed to delete the book due to some reason..." });
    }
});

Here’s my SQL book table:

CREATE TABLE IF NOT EXISTS public.books
(
    "bookID" integer NOT NULL DEFAULT nextval('"books_bookID_seq"'::regclass),
    title character varying(100) COLLATE pg_catalog."default" NOT NULL,
    author character varying(100) COLLATE pg_catalog."default" NOT NULL,
    publisher character varying(100) COLLATE pg_catalog."default" NOT NULL,
    "publicationDate" date NOT NULL,
    "coverType" character varying(10) COLLATE pg_catalog."default" NOT NULL,
    status boolean NOT NULL DEFAULT false,
    "categoryID" integer NOT NULL,
    CONSTRAINT books_pkey PRIMARY KEY ("bookID"),
    CONSTRAINT "books_categoryID_fkey" FOREIGN KEY ("categoryID")
        REFERENCES public.categories ("categoryID") MATCH SIMPLE
        ON UPDATE NO ACTION
        ON DELETE NO ACTION
)

And I’m also posting the deleteBook function from the front-end as now the button isn’t working at all:

async function deleteBook(e, book) {
        const resp = await axios.delete(`/books/${book.bookID}`);
        if (resp.data.success) {
            setBooks((prevBooks) => prevBooks.filter((b) => b.bookID !== book.bookID));
        }
    };