I have a form where I need to send the form data when I click submit to the backend server with a POST request.
import fetch from 'helpers';
import { rewardEP } from 'config';
const sendReward = ({ rewardData }) => {
fetch.post(rewardEP, { ...rewardData }).then((res) => {
alert(res);
});
};
export default sendReward;
This is the file where I created the sendReward function that is an axios POST request,rewardEP is the '/reward' and the fetch function is a predefined axios request
const axiosInstance = axios.create({
baseURL: apiBaseURL,
headers: { 'Content-Type': 'application/json' },
});
For starters I only did an alert() just to see if the function works.
The frontend part of the application:
Typography,
Card,
CardActions,
CardContent,
Button,
TextField,
FormControl,
InputLabel,
Select,
MenuItem,
Checkbox,
Container,
FormControlLabel,
} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import { Autocomplete } from '@material-ui/lab';
import { useFormik } from 'formik';
import { useState } from 'react';
import sendReward from '../../core/reward';
const useStyles = makeStyles({
root: {
width: 500,
height: 500,
margin: 'auto',
},
content: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
},
input: {
marginTop: 10,
},
button: {
margin: 'auto',
},
});
const Reward = () => {
const classes = useStyles();
const [colleague, setColleague] = useState('');
const formik = useFormik({
initialValues: {
colleague: { name: '' },
reward: { name: '' },
gift: { name: '' },
message: '',
checked: false,
},
onSubmit: (values) => {
// eslint-disable-next-line no-alert
// alert(`Values for reward_are: ${JSON.stringify({ ...values, colleague })}`);
sendReward(JSON.stringify({ ...values, colleague }));
},
});
const colleaguesList = [
{ id: 1, name: 'Abrudan Titus' },
{ id: 2, name: 'Apostol Lia' },
{ id: 3, name: 'Vornicu Petru' },
];
const rewardList = [
{ id: 1, name: 'Special support' },
{ id: 2, name: 'BirthDay' },
{ id: 3, name: 'Work anniversary' },
];
const giftList = [
{ id: 1, name: 'Pix' },
{ id: 2, name: 'Agenda' },
{ id: 3, name: 'Cana' },
];
return (
<Container maxWidth="sm" className={classes.root}>
<Card className={classes.root}>
<form onSubmit={formik.handleSubmit}>
<CardContent className={classes.content}>
<Typography variant="h5">Choose the colleague you want to reward!</Typography>
<Autocomplete
className={classes.input}
id="employees-list"
options={colleaguesList}
getOptionLabel={(option) => option.name}
aria-label="colleagues-list-autocomplete"
getOptionSelected={(option) => option.name}
fullWidth
name="colleague.name"
onChange={(e, value) => {
setColleague(value.name !== null ? value.name : formik.initialValues.colleague);
}}
renderInput={(params) => (
// eslint-disable-next-line react/jsx-props-no-spreading
<TextField {...params} label="Colleague" variant="outlined" name="colleague.name" />
)}
/>
<FormControl variant="outlined" className={classes.input}>
<InputLabel id="reward-input">Reward</InputLabel>
<Select
labelId="reward-input"
id="reward-list"
name="reward.name"
data-testid="reward-list"
value={formik.values.reward.name}
onChange={formik.handleChange}
label="Reward"
>
{rewardList.map((rewardItem) => (
<MenuItem key={rewardItem.id} value={rewardItem.name}>
{rewardItem.name}
</MenuItem>
))}
</Select>
</FormControl>
<FormControl variant="outlined" className={classes.input}>
<InputLabel id="gift-input">Gift</InputLabel>
<Select
labelId="gift-input"
id="gift-list"
name="gift.name"
value={formik.values.gift.name}
data-testid="gift-list"
onChange={formik.handleChange}
label="Gift"
>
{giftList.map((giftItem) => (
<MenuItem key={giftItem.id} value={giftItem.name}>
{giftItem.name}
</MenuItem>
))}
</Select>
</FormControl>
<TextField
className={classes.input}
id="message-container"
label="Message"
variant="outlined"
multiline
type="text"
name="message"
value={formik.values.message}
onChange={formik.handleChange}
rows={3}
rowsMax={5}
/>
<FormControlLabel
className={classes.input}
data-testid="anonymously-message"
control={
<Checkbox
checked={formik.values.checked}
color="primary"
name="checked"
value={formik.values.checked}
onChange={formik.handleChange}
inputProps={{ 'aria-label': 'secondary checkbox' }}
/>
}
label="Send this message anonymously"
/>
</CardContent>
<CardActions>
<Button className={classes.button} variant="contained" color="primary" type="submit">
Send
</Button>
</CardActions>
</form>
</Card>
</Container>
);
};
export default Reward;
Here on the submit function I added the imported sendReward function but i get the "An unhandled error was caught from submitForm() TypeError: Cannot read property 'post' of undefined" error and I dont understand why.What should I do and what is the way to send the data from the form to the API correctly in this scenario?
Thank you.