the nextjs model is throwing a 400 bad request error when fetching data

I need some assistance with my web application. Whenever I try to create a record by sending data to the API endpoint, it always returns a 400 bad request error on the front end. Surprisingly, when I tested the same request in Insomnia, everything worked perfectly fine. Can someone help me figure out why this issue is occurring?

Here's the code snippet:

async createEvent() {
    const requestBody = {
        userId: this.#userId,
        eventName: this.#name,
        eventDate: this.#date
    }

    const createEventResponse = await fetch(`http://localhost:3001/event/create`, {
        method: "POST",
        headers: {
            "Accept": "application/json",
            "Content-Type": "application/json"
        },
        body: JSON.stringify(requestBody)
    });

    const { message } = await createEventResponse.json();

    if (createEventResponse.status === 200) {
        return {
            flag: true,
            message
        }
    } else if (createEventResponse.status ==- 401) {
        return {
            flag: false,
            message
        }
    }
}

Answer №1

An issue occurred when one of the fields in the requestBody was found to be undefined.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

German-formatted jQuery datepicker

Need help in changing jQuery datepicker formatting from MM/DD/YYYY to German style as d MMMM yyyy. Tried implementing the following code but encountering issues. <script type="text/javascript"> $(function () { $('.datepicker&ap ...

Sort through various table columns

I am currently utilizing a data table component from Framework7, which is being generated dynamically with JSON data. My goal is to make the column filter input functional within the table. So far, I have succeeded in implementing the filter for the first ...

Tips for including a currency symbol before an input field using Material UI

Trying to add a dollar sign to the left of an input field using InputAdornment but it's not displaying correctly. Check out my code here: https://codesandbox.io/s/material-demo-wnei9?file=/demo.js ...

Alter the Vue view using an object instead of the url router

Currently working on a chrome extension using Vue.js where I need to dynamically update views based on user interactions. Usually, I would rely on the Vue Router to handle this seamlessly... however, the router is tied to the URL which poses limitations. ...

Tips for postponing the first button event in Vue 3 and JavaScript

My current task involves setting up a button event in Vue 3 that triggers a setTimeout countdown on the button before redirecting to another page. The event function has a conditional statement that initiates a countdown from 5 to 0 as long as the countVal ...

Tips for extracting both the div and entire inner content using JavaScript

I need to retrieve the inner content of a div using JavaScript For example: <div id="content" style="height: 20px; overflow: hidden"> content<br>content<br>content<br> </div> This is my HTML code. I only know the div&apos ...

Increase the value of (N) in the copied MongoDB file name

Are there any algorithms available to handle incrementing numbers in duplicate filenames? For instance, let's consider a simple collection of documents stored in a file collection: [ { "_id": "612ead8668bfcc4221a788f6" ...

Adding a border to dynamically generated content while excluding the outer borders using CSS - an easy guide

My current project involves establishing a grid system that dynamically populates content, resulting in an uncertain number of elements being created. At the moment, each element is placed within a flexbox container with 3 elements per row. If there are mo ...

Troubleshooting: Directives in Angular 4 not recognizing RegEx patterns

I have developed a directive that validates the input in a text field, allowing users to enter numbers, dots, and commas. However, the validator only seems to work for numbers and not for commas and dots. import { Directive, ElementRef, HostListener } fro ...

Error: global not declared in the context of web3

I've been attempting to integrate Web3 into my Ionic v4 project for some time now. However, I keep encountering errors when I try to serve the project. Specifically, I receive an error message stating that Reference Error: global is not defined. Cre ...

Tips for preventing tiny separation lines from appearing above and below unordered list elements

I am attempting to utilize twitter bootstrap to create a select-option style list. How can I eliminate the thin separation lines above and below the list of items? Refer to the screenshot: Below is the visible code snippet. It would be best to view the j ...

What is the purpose of the volume option in docker-compose specifically for react/next projects?

One thing that has been on my mind is why we need to utilize the VOLUME option in our docker-compose setup specifically for React/Next.js. On one hand, I understand that VOLUME is used to "save the data", such as when working with a database. However, whe ...

What's the best method for uploading a file to AWS S3: POST or PUT requests?

Could you please provide insights on the advantages and disadvantages of utilizing POST versus PUT requests for uploading a file to Amazon Web Services S3? Although I have come across some relevant discussions on platforms like StackOverflow, such as this ...

Retrieving Data from Vue JS Store

I am fetching value from the store import {store} from '../../store/store' Here is the Variable:- let Data = { textType: '', textData: null }; Upon using console.log(store.state.testData) We see the following result in the cons ...

Utilizing Vue's data variables to effectively link with methods and offer seamless functionality

I am encountering difficulty retrieving values from methods and parsing them to provide. How can I address this issue? methods: { onClickCategory: (value) => { return (this.catId = value); }, }, provide() { return { categor ...

Implementing seamless redirection to the login page with Passport in Node.js

I have encountered a persistent issue while using node.js, express, and passport. After successfully validating the user with passport, my application keeps redirecting back to the login page instead of rendering the index page. Is there a problem with the ...

Customize the dynamic options for selecting with Bootstrap

I have been experimenting with the bootstrap select plugin and have run into an issue while trying to dynamically add options using Javascript. Unfortunately, the list always appears empty. Interestingly, when I revert back to using a conventional HTML sel ...

How can I design a captivating splash screen for my next/capacitor app?

As a newcomer to the world of React and Capacitor, I am in need of assistance with implementing a splash screen for a Next/Capacitor application. After successfully installing @Capacitor/core, I made sure to include the following code snippet in my capacit ...

A guide on implementing a .click function with jQuery

I have a code snippet that is supposed to add 100 to a number in a MySQL table when a button is clicked. However, the code does not work as expected. When I click the button, nothing happens, but if I refresh the page, it adds 100 to the number. Can some ...

Guide on how to showcase JSON data using vanilla JavaScript within the Laravel framework

As a beginner in Laravel, I am looking to pass JSON data from my controller using vanilla JavaScript to my view blade. However, I am unsure of the steps to accomplish this. Below is an example of my controller: public function index(Request $request) { ...