React-Hooks PUT request a specific field from an object on click - node.js

Question

How can I make a PUT request and target ONLY patient.status and change it from Active to Inactive? I don't want to change the entire patient, only the patient.status.
Keep in mind I want to use fetch(), I just do not know the syntax on how to only edit patient.status and pass it through my backend, etcetera. Help would be appreciated.
I am fetching data from a specific patient this way and declaring state.
const [patient, setPatient] = useState ({})
useEffect(() => {
fetch(`/api/patients/${match.params.id}`)
.then(response => response.json())
.then(json => setPatient(json))
}, [patient])
The submit function.
const onDeactivePatientSubmit = (e) => {
e.preventDefault()
}
The button.
{ patient.status === "Active" &&
<Button size="small" color="primary" variant="outlined" onClick={onDeactivePatientSubmit}
value="Inactive">DE-ACTIVATE PATIENT</Button>
}
The backend. (Please keep in mind I want to keep the req.body.editPatient as is)
router.put('/:id', async (req, res) => {
const {id} = req.params;
await Patient.findByIdAndUpdate(id, {...req.body.editPatient});
console.log(req.body.editPatient)
res.status(200).send({});
})

Answer 1

fetch accepts a second parameter, an options object, where you can set the method you want to use, the data to send, etc. You can use the spread operator to create a new/updated patient object. It will make a copy of the fetched patient object, and you can update the status field. You can send this new object via fetch:
const onDeactivePatientSubmit = (e) => {
e.preventDefault()
let updatedPatient = {
...patient,
status: 'Inactive',
}
fetch(`/api/patients/${patient.id}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
// the data to send
body: JSON.stringify({ editPatient: updatedPatient })
})
.then(res => res.json())
.then(data => {
// check if successfully updated in db
setPatient(updatedPatient)
}