javascript - How can I fix my textfield to properly send requests to my API

Question

I'm a little bit confused on how I can get my textfield component to send input data (correctly/validated) from React to my API server. My backend is receiving the requests, but I'm not actually sure what is being sent over within my request.

To go into deeper detail, I'm trying to send a PATCH request to my stock_list JSON field. The data within the patch request is then selected by the user, which should be option.symbol from the textfield

import React, { useState, useEffect } from 'react';
import Axios from "axios";
import axiosInstance from '../../../axios';
import { useParams } from 'react-router-dom';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

export default function SymbolInput() {
    const { slug } = useParams();
    const initialFormData = Object.freeze({
      stock_list: '',
  });
    const [formData, updateFormData] = useState(initialFormData);

    const handleChange = (e) => {
        updateFormData({
            ...formData,
        });
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(formData);

        axiosInstance
            .patch(`bucket/symbols/` + slug + '/', {
                stock_list: formData.stock_list,
            })
            .then((res) => {
               // history.push('/');
                console.log(res);
                console.log(res.data);
            });
    };      
    const [data, setData] = useState({ companies: [] });

    const classes = useStyles();

    useEffect(() => {
        Axios.get("https://app.stockbuckets.io/tickers/").then((res) => {
            setData({ companies: res.data });
        });
    }, [setData]);
    

    return (
        <div className={classes.root}>
          <form>
            <Autocomplete
                multiple
                options={data.companies}
                filterSelectedOptions
                onChange={handleChange}
                getOptionLabel={(option) => option.symbol} 
                renderOption= {(option) => option.symbol + ' | ' +  option.company}
                getOptionSelected={(option) => option.symbol} 
                renderInput={(params) => (
                <TextField
                    {...params}
                    id="stock_list"
                    name="stock_list"
                    variant="outlined"
                    label="Companies"
                />
                )}
            />
          </form> 
          <Button 
            variant="contained" 
            color="primary"
            onClick={handleSubmit}
          >
            Add Stocks
          </Button>
        </div>
    );
}

Here are my errors:

xhr.js:177 PATCH http://127.0.0.1:8000/api/bucket/symbols/x8xkgafkm4/ 500 (Internal Server Error)

Yes I am getting an error from the backend, to start solving why I first want to see what data is actually being sent over.

createError.js:16 Uncaught (in promise) Error: Request failed with status code 500
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:62)

How can I debug/fix my code so I can at least console.log the data being sent over by my textfield when a user pushes my button component. Thank you for the help.

EDIT: It looks like nothing is being sent in the payload PATCH request, how may I go about solving this?

question from:https://stackoverflow.com/questions/65893381/how-can-i-fix-my-textfield-to-properly-send-requests-to-my-api

Answer 1

Waitting for answers