I have been having problem with put request in expressJS used with react as frontend. I can't find what i am doing wrong so please if anyone can help me please do.
this is the react component i am using. when user submits the form, it changes the url and send a request to backend again.
import './styles/transferPage.css'
import useFetch from './usefetch';
import { useParams, } from "react-router-dom";
import { useState } from 'react';
const TransferPage = () => {
const [amount, setAmount] = useState(0)
const { id } = useParams()
const [url, setUrl] = useState(`/api/all/${id}`)
const transferMoney = (e) => {
e.preventDefault()
const senderId = localStorage.getItem('senderId');
const receId = id;
setUrl(`/api/choose/${senderId}/${receId}/${amount}`)
}
const { data, error } = useFetch(url);
return (
<>
{ error && <div>{error}</div>}
{data && <div className="detailAbout">
<p>Customer Name: <span>{data.customerName}</span></p>
<div className="card">
<form onSubmit={transferMoney}>
<label htmlFor="amount">
Amount (in INR):
</label>
<input onChange={(e)=>{setAmount(e.target.value)}} type="number" id="amount" name="amount" required />
<input type="submit" value="Submit" />
</form>
</div>
</div>}
</>
);
}
export default TransferPage;This is the useFetch function
import { useState, useEffect } from 'react';
const useFetch = (url) => {
const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
const [total, setTotal] = useState(0)
useEffect(() => {
const fetchData = async () => {
const abortCont = new AbortController();
setIsLoading(true)
try {
const response = await fetch(url)
if (!response.ok) {
throw Error('could not fetch the data for that resource')
}
const data = await response.json();
if (data.length === 0) {
setData(null)
throw Error('no anime available');
}
setData(data)
setTotal(data.length)
setIsLoading(false)
setError(null)
}
catch(err){
if (err.name === 'AbortError') {
console.log('Fetch Aborted')
}
setIsLoading(false)
setError(err.message)
setData(null)
}
return () => abortCont.abort()
}
fetchData()
},[url])
return {data,isLoading,error,total}
}
export default useFetch;the connection works fine with other routers but not with the put router
here is the put router
app.put('/api/choose/:senderId/:receId/:amount',async (req, res) => {
const senderId = req.params.senderId;
const receId = req.params.receId;
const amountToSend = req.params.amount;
const customer = await Customer.findById(receId)
if (!goal) {
res.status(400)
}
const result = await Customer.findByIdAndUpdate(receId, amount)
res.status(200).send('send')
})I tried console logging the params or the data but nothing appears in console. but when i use get request instead of PUT i get the params in console.
this is the error i am getting in the browser
