Fix the 400 Bad Request Error in ReactJS

Hi, I’m getting an error ‘400 Bad Request’ error when trying to send a POST request from my client to a Django backend. The strange thing is that the same request works perfectly in Postman, so I’m not entirely sure what’s going wrong. I suspect the issue might be on the client side.

Here my code:

codeimport React, { useState } from 'react';

const Createnewdegrees = () => {
    const [full_name, setname] = useState('');
    const [shortcode, setcode] = useState('');

    const createmodel = (e) => {
        e.preventDefault();
        const degree = { 
            full_name: full_name,
            shortcode: shortcode
        };

        const requestOptions = {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ degree })
        };

        fetch('http://127.0.0.1:8000/api/degree/', requestOptions)
            .then(response => response.json())
            .then(() => {
                console.log('added');
            });

        console.log(degree);
    };

    return (
        <div className="newdegreeform">
            <h1>Create New Degree</h1>
            <form onSubmit={createmodel}>
                <label>Degree Title:</label>
                <input
                    type="text"
                    required
                    value={full_name}
                    onChange={(e) => setname(e.target.value)}
                />
                <label>Degree Code:</label>
                <input
                    type="text"
                    required
                    value={shortcode}
                    onChange={(e) => setcode(e.target.value)}
                />
                <button>Create New Degree</button>
            </form>
        </div>
    );
};

export default Createnewdegrees;

Causes the “400 Bad Request” Error?

The “400 Bad Request” error indicates that the server cannot understand the request sent by the client due to malformed syntax or invalid data. In this case, there are a few potential reasons why the error might be occurring:

• Data Format Issue: The structure of the request body may not match the format expected by the Django backend.
• Content-Type Mismatch: The server might not be able to parse the request if the Content-Type header is incorrect.
• Incorrect URL: The endpoint may not exist, or there may be a typo in the URL.

Fixing the Code

In the original code, the request body is being sent as:

codebody: JSON.stringify({ degree })

This wraps the data inside an additional degree object, like this:

code{
  "degree": {
    "full_name": "value",
    "shortcode": "value"
  }
}

However, if the Django backend expects the data to be in the form:

code{
  "full_name": "value",
  "shortcode": "value"
}

Then the current format will result in a “400 Bad Request” error.

To fix this, the data should be sent directly without the extra wrapper. Here’s the modified code:

Corrected Code

codeimport React, { useState } from 'react';

const Createnewdegrees = () => {
    const [full_name, setname] = useState('');
    const [shortcode, setcode] = useState('');

    const createmodel = (e) => {
        e.preventDefault();
        const degree = 
        { 
            full_name: full_name,
            shortcode: shortcode
        };

        const requestOptions = {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(degree) // Send the data directly
        };

        fetch('http://127.0.0.1:8000/api/degree/', requestOptions)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                console.log('Degree added:', data);
            })
            .catch(error => {
                console.error('There was a problem with the fetch operation:', error);
            });

        console.log(degree);
    };

    return (
        <div className="newdegreeform">
            <h1>Create New Degree</h1>
            <form onSubmit={createmodel}>
                <label>Degree Title:</label>
                <input
                    type="text"
                    required
                    value={full_name}
                    onChange={(e) => setname(e.target.value)}
                />
                <label>Degree Code:</label>
                <input
                    type="text"
                    required
                    value={shortcode}
                    onChange={(e) => setcode(e.target.value)}
                />
                <button type="submit">Create New Degree</button>
            </form>
        </div>
    );
};

export default Createnewdegrees;

Changes Made

1. Send Data in the Correct Format: The request body was changed from JSON.stringify({ degree }) to JSON.stringify(degree) to send the data in the expected format.
2. Error Handling: Added error handling for the fetch request to provide more informative error messages.
3. Fixed JSX Issue: Changed ClassName to className to follow JSX conventions.

Conclusion

By sending the data in the expected format and handling potential errors more effectively, you should be able to resolve the “400 Bad Request” error and successfully post data from your React app to the Django backend. Make sure the backend is also configured correctly to handle the incoming data and respond with appropriate status codes.