"Post / HTTP/1.1" 400 78 Bad Request for POST requst from React to Django

Question

I am trying to connect React js with Django backend and trying to send information from the form with 2 fields "name" and "description" to django.

NewSpace.js

function NewSpace() {
  const navigate = useNavigate();

  const { mutate } = useMutation({
    mutationFn: createNewSpace,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["events"] });
      navigate("/events");
    },
  });

  function handleSubmit(formData) {
    mutate({ event: formData });
  }

  return (
    <Modal>
      <EventForm onSubmit={handleSubmit}>
        <Link to="../" className="button-text">
          Cancel
        </Link>
        <button type="submit" className="button">
          Create
        </button>
      </EventForm>
    </Modal>
  );
}
export default NewSpace;

EventForm.js

export default function EventForm({ onuubmit, children }) {
  

  function handleSubmit(event) {
    event.preventDefault();

    const formData = new FormData(event.target);
    const data = Object.fromEntries(formData);

    onSubmit(data);
  }

  return (
    <form id="event-form" onSubmit={handleSubmit}>
      <p className="control">
        <label htmlFor="name">Name</label>
        <input
          type="text"
          id="name"
          name="name"
        />
      </p>

      <p className="control">
        <label htmlFor="description">Description</label>
        <textarea
          id="description"
          name="description"
        />
      </p>

      <p className="form-actions">{children}</p>
    </form>
  );
}

I have a POST view where i am trying to get the value and save it.

    def post(self,request):
        serializer = self.serializer_class(data=request.data)
        if serializer.is_valid(raise_exception=True):
             serializer.save()
             return Response(serializer.data)

But i am recieving below error

Bad Request: /
[10/Dec/2023 11:19:35] "POST / HTTP/1.1" 400 78

I am really new to both django and react, not sure wheather the error is in the backend or the front end. Please let me know. Thank you

Update : I am able to resolve the above error by adding the blank = True and Null= True in my model.

class React(models.Model):
    name = models.CharField(default=None,max_length=20, blank=False,null=True)
    description = models.CharField(default=None,max_length=200, blank=False,null=True)
    class Meta:
        ordering = ['name']

but now its not taking the values to my database but updating empty values I havent changed anything anywhere else.

Here is the response from the network

Answer 1

You have a typo in the handleSubmit prop passed to EventForm. It should be onSubmit instead of onuubmit. Fix this in NewSpace.js:

<EventForm onSubmit={handleSubmit}>

Also - When making a POST request to a Django backend, you need to include the CSRF token in your request headers. Ensure that your frontend sends the CSRF token along with the request.

Answer 2

You should add more details from the network request, checking payload -- so we can see what you are sending to the backend. Also check preview and response of the request, usually you can catch a traceback or a more detailed error when debug is turned on in Django.