I am using Axios post request to fill all the data but in the backend, it’s giving undefined value for each field in the form I want to know how to post all the data in formData in Axios because it’s giving in empty data in Axios post request. Now I am only getting empty data so how can I store the data from URL params when I am passing in input text fields here problem is only how to set data in Axios.
import React, { useState, useEffect } from "react";
import axios from "axios";
export default function Form() {
const [sale, setSale] = useState("");
const [district, setDistrict] = useState("");
const [billing, setBilling] = useState("");
const [customer, setCustomer] = useState("");
const [product, setProduct] = useState("");
var bodyFormData = new FormData();
bodyFormData.append("sale", "12");
bodyFormData.append("district", district);
bodyFormData.append("billing", billing);
bodyFormData.append("customer", customer);
bodyFormData.append("product", product);
axios({
method: "post",
url: "http://localhost:8080/form",
data: { bodyFormData },
headers: { "Content-Type": "multipart/form-data" },
})
.then(function (response) {
//handle success
console.log(response);
})
.catch(function (response) {
//handle error
console.log(response);
});
const { search } = useLocation();
const urlParams = Object.fromEntries([...new URLSearchParams(search)]);
useEffect(() => {
console.log(urlParams);
}, [urlParams]);
const classes = useStyles();
const [currency, setCurrency] = React.useState("EUR");
const handleChange = (event) => {
setCurrency(event.target.value);
};
const onSubmit = (data) => console.log("get", JSON.stringify(data));
//console.log(url);
return (
<div>
<Grid
container
container
direction="column"
alignItems="center"
justify="center"
>
<Grid item xs={12} lg={6}>
<Card
className="p-4 mb-4"
style={{
height: 765,
transform: "rotateX(15deg)",
}}
>
<Container component="main" fixed>
<CssBaseline />
<form
className={classes.form}
noValidate
onSubmit={(e) => onSubmit(e)}
//onSubmit={handleSubmit}
>
<Grid container spacing={4}>
<Grid item xs={12} sm={6}>
<TextField
type="text"
variant="outlined"
fullWidth
id="sales"
label="Sales office"
name="sale"
autoComplete="lname"
onChange={(event) => {
setSale(event.target.value);
}}
defaultValue={urlParams.salesoff}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
type="text"
variant="outlined"
fullWidth
id="billing"
label="Billing document"
name="billing"
autoComplete="lname"
onChange={(event) => {
setBilling(event.target.value);
}}
defaultValue={urlParams.billingdoc}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
variant="outlined"
type="text"
fullWidth
id="district"
label="Sales district"
name="district"
autoComplete="lname"
onChange={(event) => {
setDistrict(event.target.value);
}}
defaultValue={urlParams.salesdist}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
variant="outlined"
fullWidth
id="customer-name"
label="Customer name"
name="customer-name"
autoComplete="lname"
onChange={(event) => {
setCustomer(event.target.value);
}}
defaultValue={urlParams.custname}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
variant="outlined"
type="text"
fullWidth
id="name"
label="Product name"
name="product-name"
autoComplete="lname"
onChange={(event) => {
setProduct(event.target.value);
}}
defaultValue={urlParams.product}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
fullWidth
id="outlined-select-currency"
select
label={
<Typography style={{ fontSize: 20 }}>
Action expected
</Typography>
}
value={currency}
variant="outlined"
>
{actions.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
variant="outlined"
type="number"
fullWidth
id="lastName"
label="Price increment"
name="lastName"
autoComplete="lname"
/>
</Grid>
</Grid>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
onClick={Form}
>
Submit
</Button>
<Grid container justify="flex-end">
<Grid item></Grid>
</Grid>
</form>
</div>
</Container>
</Card>
</Grid>
</Grid>
</div>
);
}
Also I am attaching a screenshot where I am passing the fields in nodejs
