I've been trying to figure this out for hours, but i think im doing it wrong. So what im basically doing is.

-> Fetch the specific user, and throw it into the placeholder -> which is working

but when I try to edit the information and then when i try to save it this error shows and then in my phpadmin, it saves a null. it seems that I can't connect the front and the backend.

> 
> sql: 'UPDATE users SET name = NULL, email = NULL, mobile = NULL WHERE id = ${id} '
> 
> 
> 

Edit.jsx

```
import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'

const EditUser = () => {
  const navigate = useNavigate()
  const [data, setData] = useState([])
  const [inputs, setInputs] = useState([])
  const { id } = useParams()

  useEffect(() => {
    const getUser = async () => {
      const res = await axios.get(`http://localhost:5000/${id}`)
      setData(res.data[0])
    }
    getUser()
  }, [])

  const handleSubmit = async () => {
    try {
      await axios.put(`http://localhost:5000/${id}`, inputs)
    } catch (error) {
      console.log(error)
    }
  }

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

  return (
    <div>
      <form
        action=""
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          flexDirection: 'column',
        }}
        onSubmit={handleSubmit}
      >
        <label htmlFor="">Name</label>
        <input type="text" placeholder={data.name} onChange={handleChange} />
        <label htmlFor="">Email</label>
        <input type="text" placeholder={data.email} onChange={handleChange} />
        <label htmlFor="">Mobile</label>
        <input type="text" placeholder={data.mobile} onChange={handleChange} />
        <button type="submit">save</button>
      </form>
    </div>
  )
}

export default EditUser

```

backend.js

```
app.put('/:id', (req, res) => {
  const id = req.params.id
  const name = req.body.name
  const email = req.body.email
  const mobile = req.body.mobile
  pool.query(
    `UPDATE users SET name = ?, email = ?, mobile = ? WHERE id = ${id} `,

    [name, email, mobile],
    (err, result) => {
      if (err) {
        console.log(err)
      } else {
        res.send(result)
      }
    }
  )
})

app.get('/:id', (req, res) => {
  const { name, email, mobile } = req.body
  const { id } = req.params

  pool.query(`SELECT * FROM users WHERE id = ${id} `, (err, result) => {
    if (err) {
      console.log(err)
    } else {
      res.send(result)
    }
  })
})

```

[![enter image description here](https://i.stack.imgur.com/Os2LS.png)](https://i.stack.imgur.com/Os2LS.png)