Cannot Update Data in MySql (error: ER_PARSE_ERROR)

[NitishKumar525]

I'm trying to make the "Edit Profile" page so a user can edit his/her profile info. But I screwed up somewhere and It is not working. I am assuming that I did a mistake in the query part.

My controller (API):

 export const editUser = (req, res) => {
  const q = "SELECT * FROM users WHERE id = ?";
  const userId = req.params.userId;

  db.query(q, [userId], (err, data) => {
    if (err) return res.status(409).json(err);

    const q = "UPDATE users SET (`name`, `surname`, `headline`) VALUES (?)";
    const values = [req.body.name, req.body.surname, req.body.headline];

    db.query(q, [values], (err, data) => {
      if (err) return res.status(500).json(err);
      return res.status(200).json("User has been updated.");
    });
  });
};

My route (API):

const router = express.Router();
router.post("/edit-profile/:userId", editUser);

export default router

My client site code:

const [err, setErr] = useState(null);
  const [inputs, setInputs] = useState({ name: "", surname: "", headline: "" });

  const handleChange = (e) => {
    setInputs((prev) => ({ ...prev, [e.target.name]: e.target.value }));
    console.log(inputs);
  };

  const handleClick = async (e) => {
    e.preventDefault();

    try {
      await axios.post("http://localhost:8800/api/users/edit-profile/" + userId, inputs);
    } catch (err) {
      setErr(err.response.data);
    }
  };

HTML

 <form action="a">
            <div>
              <p>Name:</p>
              <input
                type="text"
                placeholder={error ? "Something Went wrong" : isLoading ? "Loading" : data.name}
                name="name"
                onChange={handleChange}
              />
            </div>
            <div>
              <p>Surname:</p>
              <input
                type="text"
                placeholder={error ? "Something Went wrong" : isLoading ? "Loading" : data.surname}
                name="surename"
                onChange={handleChange}
              />
            </div>
            <div>
              <p>Headline:</p>
              <input
                type="text"
                placeholder={error ? "Something Went wrong" : isLoading ? "Loading" : data.headline}
                name="headline"
                onChange={handleChange}
              />
            </div>
          </form>

[ansiace]

It looks like the issue may be a combination of SQL query syntax errors and incorrect variable names in the front-end code. Here's a detailed breakdown and resolution for each section of the code.

Backend (Controller API)

SELECT query: This query looks fine. It fetches the user with a specific id.
UPDATE query: There's an issue with the UPDATE SQL query syntax. It should use SET with individual columns to update, not VALUES. The corrected query should look like this:

.js

 export const editUser = (req, res) => {
  const q = "SELECT * FROM users WHERE id = ?";
  const userId = req.params.userId;

  db.query(q, [userId], (err, data) => {
    if (err) return res.status(409).json(err);

    // Correct the SQL syntax here
    const updateQuery = "UPDATE users SET name = ?, surname = ?, headline = ? WHERE id = ?";
    const values = [req.body.name, req.body.surname, req.body.headline, userId];

    db.query(updateQuery, values, (err, data) => {
      if (err) return res.status(500).json(err);
      return res.status(200).json("User has been updated.");
    });
  });
};

.js

 const router = express.Router();
router.post("/edit-profile/:userId", editUser);

export default router;

Client-Side Code (React)

 const [err, setErr] = useState(null);
const [inputs, setInputs] = useState({ name: "", surname: "", headline: "" });
const userId = 'some_user_id';  // Replace with actual logic to get userId

const handleChange = (e) => {
  setInputs((prev) => ({ ...prev, [e.target.name]: e.target.value }));
  console.log(inputs);
};

const handleClick = async (e) => {
  e.preventDefault();

  try {
    await axios.post("http://localhost:8800/api/users/edit-profile/" + userId, inputs);
  } catch (err) {
    setErr(err.response.data);
  }
};

HTML Form

 <form>
  <div>
    <p>Name:</p>
    <input
      type="text"
      placeholder={error ? "Something Went wrong" : isLoading ? "Loading" : data.name}
      name="name"
      onChange={handleChange}
    />
  </div>
  <div>
    <p>Surname:</p>
    <input
      type="text"
      placeholder={error ? "Something Went wrong" : isLoading ? "Loading" : data.surname}
      name="surname"
      onChange={handleChange}
    />
  </div>
  <div>
    <p>Headline:</p>
    <input
      type="text"
      placeholder={error ? "Something Went wrong" : isLoading ? "Loading" : data.headline}
      name="headline"
      onChange={handleChange}
    />
  </div>
  <button onClick={handleClick}>Submit</button>
</form>

Summary of Fixes:

1. Correct the UPDATE SQL query in the backend to follow the correct syntax.
2. Fix the typo in the form's input name from surename to surname.
3. Ensure userId is passed correctly in the client-side request.
4. Add a submit button to trigger the form submission.

Let me know if you need further clarification!