What steps can be taken to troubleshoot and resolve the API problem causing a 400 error in a react

I'm currently working on my react project and attempting to add a new page. I've set up all the models, controllers, and routes, but unfortunately, the data from the form on my newly added page isn't being posted into the MongoDB collection. I've already created the API, but for some reason, the data isn't getting posted.

I suspect there might be an issue with the API as it's resulting in a 400 error. Could someone please take a look at my code? I can't seem to figure out the exact reason behind this. Here is the code:

Here is my api-contactUs.js file:

const create = (contactUs) => {
    return fetch('/api/contactUs', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(contactUs)
      })
      .then((response) => {
        return response.json()
      }).catch((err) => console.log(err))
  }
export default create

My contactUs.js file:

(...)

contactUs.controller.js file:

(...)

contactUs.routes.js file:

(...)

contactUs.model.js file:

(...)

Looking forward to your assistance! :)

Answer №1

There doesn't seem to be any error messages provided, but the issue may lie within the clickSubmit function. It looks like you have a duplicate field "name" in the contactUs object instead of separate fields for first name and last name (fname and lname).

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

Tips for implementing a personalized color scheme with Material UI

Currently, I am attempting to incorporate my own theme into my React Js app with the help of Material UI. If someone could guide me through the process step by step, it would be greatly appreciated. I have limited experience in both ReactJs and Material ...

Can you help me transition this node.js code that relies on callbacks to rxjs?

Currently, I am experimenting with node.js libraries that utilize callbacks and rxjs to determine a simpler approach. Would anyone be able to write this code using only rxjs? I am looking to eliminate the callbacks and stick solely with rxjs without intr ...

Experiencing a problem with NextAuth on Vercel, I'm encountering a server error that needs to be resolved

I utilized Google as an authentication provider with NextAuth. I set up all necessary environment variables for both production and development environments. While it functions flawlessly in development mode on my local machine, I encounter the error "Serv ...

Experiencing lengthy delays when sending AT commands to Huawei E3131 modem for AT+CMGS result

Am I experiencing a delay of around 30 seconds when receiving results from AT+CMGS="my phone number"\r? Here is the sequence of commands: REQ: AT RES: AT RES: OK REQ: AT+CMGF=1 RES: AT+CMGF=1 RES: OK REQ: AT+CMGS="+4xxxxxxxxxx" RES: AT+CMGS="+4xxx ...

What is the optimal method for adding classes to the html and body tags in a next.js project?

Currently, I am utilizing Next.js and Tailwind CSS in my project. In order to ensure proper display of certain elements, I found it necessary to add style classes to the <html> and <body> tags. This adjustment was made to my MyApp component: f ...

Is it possible for remote Node.js applications to communicate in real-time using full-duplex messaging via WebSockets

With no human involvement, both Endpoint A and Endpoint B are standalone Node.js applications operating independently. Endpoint A is tasked with establishing a secure web socket connection with Endpoint B and ensuring it remains active 24/7. Each endpoin ...

Limit the frequency of rendering JSX elements in React by implementing debouncing techniques

Is there a way to delay the rendering of a jsx element in order to smooth out the animation? I have an expanding panel with content inside, and when the panel is empty, the animation works well. However, if the panel already contains content, the expansion ...

Experiencing difficulties in deploying to Heroku due to a conflicting peer dependency with email-validator@2.0

Encountering production issues while deploying my app to Heroku. The following error log is displayed when attempting to push from the node git: Counting objects: 100% (194/194), done. Delta compression using up to 8 threads Compressing objects: 100% (185/ ...

Ways to troubleshoot unexpected http requests (404 response) using Axios

When making the HTTP request, everything works smoothly. However, there is an unexpected additional request to /%3Canonymous%3E that results in a 404 error. This is triggering the following error message in Redux: Unhandled Rejection (TypeError): Cannot ...

Why am I finding that my NodeJS server hosted on Elastic Beanstalk is unexpectedly receiving HTTPS traffic on port 80?

I have recently developed a simple NodeJS server. var http = require("http"); http.createServer(function (request, response) { response.writeHead(200, {'Content-Type': 'text/plain'}); response.end('Hello World\n') ...

Unleashing the power of conditional exports in package.json

Within my package.json, I define an exports section: "exports": { "import": "./dist/a.es.js", "require": "./dist/b.umd.js" }, However, during development, I wish to use different pa ...

Error: The WebAssembly instantiation failed due to memory exhaustion in wasm allocation

Upon attempting to initiate my node js app in cpanel, I encountered the following error: RangeError: WebAssembly.instantiate(): Out of memory: wasm memory at internal/deps/cjs-module-lexer/dist/lexer.js:1:33573 Interestingly, when working on localhost, ev ...

Issues with removing options from Autocomplete persist in React MaterialUI

Currently navigating the world of ReactJS and experimenting with Material UI's Autocomplete component. The challenge lies in managing a complex data structure where options are dynamically generated based on user selections, but removing previously se ...

In Next.js, the 404 error page is displayed using getInitialProps

Currently, I am learning how to redirect users in getInitialProps by following a helpful example. Here is the link to the example I am referring to However, I encountered an issue where when I try to return a 404 error using the code snippet provided, in ...

What is the best method to update the accessor value of my react table depending on certain data conditions?

const data = { name:"test1", fclPrice:100, lclPrice:null, total:"50" } and here are the two columns: const Datatable = [ { Header: 'Name', accessor: 'name' }, { Header: 'Price', ac ...

Utilizing Filter in ReactJS to Avoid Displaying Duplicate Entries in an Array

I am facing an issue on my ReactJS page where two dropdown lists are showing duplicate values. These values are retrieved from a json file. I have tried using the filter method to eliminate duplicates, but I am unsure about how to apply it in my array whil ...

The importance of context visibility for functions in JavaScript within a React.js environment

Why is it that the react state is visible in the function handleFinishChange, but cannot be seen in validationFinishTime? Both are passed to the component InputFieldForm. When executing this code, an error of Uncaught TypeError: Cannot read property ' ...

Error encountered in typescript when trying to implement the Material UI theme.palette.type

Just starting out with Material UI and TypeScript, any tips for a newcomer like me? P.S. I'm sorry if my question formatting isn't quite right, this is my first time on Stack Overflow. https://i.stack.imgur.com/CIOEl.jpg https://i.stack.imgur.co ...

Strange problem encountered while using npm

Hello, I am encountering an issue where I run the command: npm run watch and it provides the following output: /public/js/app.js 1.94 MiB /public/js/app [emitted] /public/js/app // large list of files and sizes /// public/css/app.css 193 ...

Issue with Circular Progress not reflecting Material-UI-next Theme

After following the documentation, I updated my theme but the circular progress element still displays the default primary color instead of the one specified in the theme. My goal is to enable end users to adjust the theme using mobx computed values, but e ...