I cant send data using Axios to my backend

Question

I am having this problem sending data that is typed in a form to an endpoint using axios. Any help is appreciated

Search Form.js:

import React,{useState,useMemo} from 'react'
import axios from 'axios'
const  Search = () => {
const handleSubmit = async(e) => {
    
    const re = /^[0-9\b]+$/
    if (e.key === "Enter") {
        if(e.target.value==='' || re.test(e.target.value))
        {
            e.preventDefault()
            const cust_number=e.target.value
            axios({
                method: "post",
                url: "http://localhost:8080/Hrc/Search",
                data:{cust_number:e.target.value},
                headers: {"Content-Type": "multipart/form-data" },
                })
                .then(function (response) {

                    console.log(response);
                })
                .catch(function (response) {
                  //handle error
                    console.log(response);
                })
        }
    }
}

    return (
    <div>
        <div>
            <form >
            <input type="text" name='cust_number' placeholder='Search Customer Id' className="sarch-button" onKeyPress={handleSubmit}/>
            </form>
        </div>
    </div>
    )
}


export default Search

Output:-

{data: Array(0), status: 200, statusText: '', headers: {…}, config: {…}, …}
config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
data: []
headers: {content-length: '2', content-type: 'application/json;charset=UTF-8'}
request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
status: 200
statusText: ""
[[Prototype]]: Object

As you can see, the data part is not getting updated. Please Help

Answer 1

If your endpoint expects form data, use FormData.

const formData = new FormData();
formData.append("cust_number", e.target.value);
try {
  const resp = await axios({
    method: "post",
    url: "http://localhost:8080/Hrc/Search",
    data: formData,
  });
  console.log(resp);
} catch (err) {
  console.error(err);
}