I am using MERN stack to build a simple website with CRUD functionalities
Whenever I try updating the documents , I get these logs
name 1 email 1 mem phone 1jnk bundle.js:1014:13
XMLHttpRequest { readyState: 4, timeout: 5000, withCredentials: false, upload: XMLHttpRequestUpload, responseURL: "", status: 0, statusText: "", responseType: "", response: "", responseText: "" }
bundle.js:1032:17
config
Object { transitional: {…}, adapter: (2) […], transformRequest: (1) […], transformResponse: (1) […], timeout: 5000, xsrfCookieName: "XSRF-TOKEN", xsrfHeaderName: "X-XSRF-TOKEN", maxContentLength: -1, maxBodyLength: -1, env: {…}, … }
bundle.js:1036:15
The server is running correctly and I have also noticed that the request is not reaching the server. I tried running the PUT request on thunderclient and POSTMAN and noticed that there the request is reaching correctly and I get the correct response.
import React, { useEffect,useState } from 'react'
import axios from 'axios'
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import { useNavigate } from 'react-router-dom'
import SendIcon from '@mui/icons-material/Send';
const EditMembers = () => {
const [name,setName]=useState("")
const [email,setEmail]=useState("")
const [phone,setPhone]=useState("")
const [membershipID,setMembershipID]=useState("")
useEffect(()=>{
setMembershipID(localStorage.getItem("MembershipID"))
setName(localStorage.getItem("Name"))
setEmail(localStorage.getItem("Email"))
setPhone(localStorage.getItem("Phone"))
},[])
const navigate = useNavigate()
const updateMember=async()=>{
console.log(`http://localhost:5000/members/${membershipID}`)
console.log(name,email,membershipID,phone)
try{
const res = await axios.put(`http://localhost:5000/members/${membershipID}`,
{
name,email,membershipID,phone
},
{timeout:5000, })
console.log(res)
navigate('/members')
} catch(error) {
if (error.response) {
console.log("errror",error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
console.log(error.request);
} else {
console.log('Error', error.message);
}
console.log('config',error.config);
}
}
return (
<>
<Box onSubmit={updateMember}
component="form"
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
'& .MuiTextField-root': { m: 1, width: '25ch' },
}}
noValidate
autoComplete="off"
>
<div>
<TextField
id="outlined-multiline-flexible"
type="text"
multiline
maxRows={4}
label="Name"
value={name}
required
onChange={(e)=>setName(e.target.value)}
/>
<TextField
id="outlined-multiline-flexible"
type="email"
multiline
maxRows={4}
value={email}
label="Email"
required
onChange={(e)=>setEmail(e.target.value)}
/>
<TextField
id="outlined-multiline-flexible"
multiline
maxRows={4}
label="Phone"
value={phone}
onChange={(e)=>setPhone(e.target.value)}
required
/>
<TextField
id="outlined-multiline-flexible"
multiline
maxRows={4}
label="MembershipID"
value={membershipID}
onChange={(e)=>setMembershipID(e.target.value)}
required
/>
</div>
<Button type="submit" size="large" variant="contained" color='success' endIcon={<SendIcon />} sx={{ mt: 2 }}>
Submit
</Button>
</Box>
</>
)
}
export default EditMembers
