PUT request not going through on axios

Question

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

Answer 1

Why use box vs form? Box doesn't have onSubmit property.

Remove the onSubmit prop from the Box component. Wrap the form elements with a form tag. Add the onSubmit prop to the form tag and call the updateMember function when the form is submitted.

Answer 2

I found the solution here button error. I changed button type=submit to type=button and it worked.