reactjs - Form POST Error: 422 unprocessable Entity

Question

I'm trying to post input values from a form, and fetch them in an existing JSON on submit in React.

The problem is I keep getting this error:

error: "Unprocessable Entity" message: "Request cannot be processed" statusCode: 422

Here is some of the relevant code (I didn't add the entire form, but the syntax is the same):

  async function onSubmit(data) {
    console.log(data);
    const enquiryInput = {
      name: data.name,
      email: data.email,
      checkIn: data.checkin,
      checkOut: data.checkout,
    };

    const url = BASE_URL + "enquiries";

    const options = {
      headers: headers,
      method: POST,
      body: JSON.stringify(enquiryInput),
    };

    console.log(options);

      await fetch(url, options);

    //history.push("/admin/hotels");
  }


  return (
    <Row className="form">

        <Form onSubmit={handleSubmit(onSubmit)} onReset={reset}>

          <Form.Group>
            <Form.Label htmlFor="name" className="form__label">
              {" "}
              <Person />
              Name
            </Form.Label>
            <Form.Control
              name="name"
              id="name"
              type="text"
              ref={register}
              className={`form__control ${errors.name ? "is-invalid" : ""}`}
              placeholder="Enter a name"
              required={true}
            />
            <div className="invalid-feedback">{errors.name?.message}</div>
          </Form.Group>
    
          <button className="btn" type="submit">
            Submit
          </button>
        </Form>
  );
}

export default Enquiry;```


Here is my header: 

```export const headers = {
  "Content-Type": "application/json",
  key: KEY,
};```

question from:https://stackoverflow.com/questions/66061038/form-post-error-422-unprocessable-entity

Answer 1

Waitting for answers