An unhandled error was caught from submitForm() TypeError: Cannot read property 'post' of undefined when trying to make a post request to the API

Viewed 1356

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.

0 Answers
Related