hi there
I was making an address form for an e-commerce website. in which the user has to fill out the form to book an order. While writing the post method. i got this 500 error
the url also exist
here’s the code below!!
import React, { useState } from 'react';
import { makeStyles } from '@mui/styles';
import { TextField, Grid, Button } from '@mui/material';
const useStyles = makeStyles((theme) => ({
formContainer: {
margin: 'auto',
padding: theme.spacing(3),
maxWidth: '600px',
backgroundColor: '#f7f7f7',
borderRadius: '8px',
boxShadow: '0 2px 4px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.24)',
marginTop: theme.spacing(12),
},
textField: {
marginBottom: theme.spacing(5),
},
button: {
marginTop: theme.spacing(2),
},
}));
const Form = () => {
const classes = useStyles();
const [fullName, setFullName] = useState('');
const [addressLine1, setAddressLine1] = useState('');
const [addressLine2, setAddressLine2] = useState('');
const [city, setCity] = useState('');
const [state, setState] = useState('');
const [zipCode, setZipCode] = useState('');
const [country, setCountry] = useState('');
const [email, setEmail] = useState('');
const [phone, setPhone] = useState('');
const handleSubmit = (event) => {
event.preventDefault();
const data = {
fullName,
addressLine1,
addressLine2,
city,
state,
zipCode,
country,
email,
phone,
};
fetch('http://localhost:1337/api/orders', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error(error));
};
return (
<form className={classes.formContainer} onSubmit={handleSubmit}>
<Grid container spacing={2}>
<Grid item xs={12}>
<TextField
className={classes.textField}
fullWidth
required
id="full-name"
label="Full Name"
variant="outlined"
value={fullName}
onChange={(event) => setFullName(event.target.value)}
/>
</Grid>
<Grid item xs={12}>
<TextField
className={classes.textField}
fullWidth
required
id="address-line1"
label="Address Line 1"
variant="outlined"
value={addressLine1}
onChange={(event) => setAddressLine1(event.target.value)}
/>
</Grid>
<Grid item xs={12}>
<TextField
className={classes.textField}
fullWidth
id="address-line2"
label="Address Line 2"
variant="outlined"
value={addressLine2}
onChange={(event) => setAddressLine2(event.target.value)}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
className={classes.textField}
fullWidth
required
id="city"
label="City"
variant="outlined"
value={city}
onChange={(event) => setCity(event.target.value)}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
className={classes.textField}
fullWidth
required
id="state"
label="State/Province/Region"
variant="outlined"
value={state}
onChange={(event) => setState(event.target.value)}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
className={classes.textField}
fullWidth
required
id="zip-code"
label="Zip/Postal Code"
variant="outlined"
value={zipCode}
onChange={(event) => setZipCode(event.target.value)}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
className={classes.textField}
fullWidth
required
id="country"
label="Country"
variant="outlined"
value={country}
onChange={(event) => setCountry(event.target.value)}
/>
</Grid>
<Grid item xs={12}>
<TextField
className={classes.textField}
fullWidth
required
id="email"
label="Email"
variant="outlined"
value={email}
onChange={(event) => setEmail(event.target.value)}
/>
</Grid>
<Grid item xs={12}>
<TextField
className={classes.textField}
fullWidth
required
id="phone"
label="Phone Number"
variant="outlined"
value={phone}
onChange={(event) => setPhone(event.target.value)}
/>
</Grid>
<Grid item xs={12}>
<Button
className={classes.button}
variant="contained"
color="primary"
type="submit"
>
Place Order
</Button>
</Grid>
</Grid>
</form>
);
};
export default Form;
***in order content type builder everything exists. ***
***Thank you, I hope that anyone will help me ***
