reactjs - Keep on getting 400 (Bad Request) on a POST request

Question

So I'm trying to make a request to a database I have set up. The point is to send a POST to add to the table and for it to feed my back the full list.

I keep on getting "POST http://localhost:8000/api/folders 400 (Bad Request)" in the console. I know it's the POST as when I check the database on both DBeaver and POSTman the database remains the same.

I tried writing '"name"' as 'name' and that didn't change anything.

const postfolder = {
    method: 'POST',
    body: JSON.stringify({ "name" : f })
};

const getFolder = {
    method: 'GET'
};

    fetch(`${config.API_ENDPOINT}/folders`, postfolder)
    .then(
        fetch(`${config.API_ENDPOINT}/folders`, getFolder)
            )
        .then(res => {
            if (!res.ok)
            return res.json().then(e => Promise.reject(e))
        })
        .then(folders => {
            this.setState({folders : folders});
        })
        .catch( error =>{
            console.error({ error });   
            console.log("I fucked up the coding: 001");
        });

---

EDIT: For clarity here is the component that defines f. Though I did have a console.log (not seen in above) that checks the value and it's giving me the correct one.

import React, {Component} from 'react';
//import { NavLink, Link } from 'react-router-dom'

import './AddFolder.css';

export default class AddFolder extends Component{
  
  handleSubmit = (e) => {
    e.preventDefault();
    console.log("handleSubmit ran");

    var nameError = document.getElementById("folderNameError");

    if (!e.target.name.value){
      nameError.classList.remove("hidden");
      return console.log("no name");
  }

  nameError.classList.add("hidden");

    return this.props.addNewFolder(e.target.name.value);
    // process form values here

  }

render(){
  return (
    <form className="folderForm" onSubmit={(e) => this.handleSubmit(e)}>
        <h3>New Folder</h3>
        <label>Text </label>
        <input type="text" className="elementName" name="name" id="folderName"/>
      <div>
        <button type="submit" className="registration__button">
                       Save
                   </button>
      </div>
      <div>
        <button type="reset" className="registration__button">
                        Cancel
                    </button>
      </div>
      <div className="errorSpace">
            <p className="hidden" id="folderNameError">A name is required</p>
        </div>
    </form>
  )
}
}

Here's a quick picture of the database. It's just a name and an id.

I'm able to fetch to it using POSTMAN so I don't believe it's the issue.

Answer 1

So I found out that the issue was that I needed to add to my fetch request.

I had it as:

const postfolder = {
    method: 'POST',
    body: JSON.stringify({ "name" : f })
};

It should be:

    const postfolder = {
        method: 'POST',
        headers: {
            'content-type': 'application/json'
          },
        body: JSON.stringify(newFolder)
    };

I needed the content-type.