Question

Request failed with status code 404

Posted October 27, 2021 380 views
APIReact

Hi guys, I am a beginner with react.js, Moreover, I have been trying to Create a form that will enable a user add input about a Particular department to my web application with a spring boot backend. Furthermore, when i try to use axios http library for that purpose i get the following error: Error: Request failed with status code 400
at createError (createError.js:16)
at settle (settle.js:17)
at XMLHttpRequest.onloadend (xhr.js:66)

Currently i am stuck and dont what to do please help.
the following is the component called InputForm.jsx

import axios from "axios";
import React from "react";

class InputForms extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            departmentName: '', 
            departmentCode: '', 
            departmentAddress: ''
        }
    }

    ChangeDepartname = event => {
        this.setState({ departmentName: event.target.value})
    }

    ChangeDepartCode = event => {
        this.setState({ departmentCode: event.target.value})
    }

    ChangeDepartAddress = event => {
        this.setState({ departmentAddress: event.target.value})
    }

    handleSubmit = event => {
       event.preventDefault(); 

       const user = {
           departmentName: this.state.departmentName, 
           departmentCode: this.state.departmentCode, 
           departmentAddress: this.state.departmentAddress
       }; 

       axios.post('http://localhost:8081/', { user } )
       .then(res => {
           console.log(res); 
           console.log(res.data); 
       })
       .catch(err => {
           console.error(err)
       })
    }

    render() { 
        return <div>
            <form onSubmit={this.handleSubmit}>
                <label>
                    departmentName:
                    <input type="text" name="departmentName" onChange={this.ChangeDepartname} />
                </label>
                <br />
                <label>
                    departmentCode:
                    <input type="text" name="departmentCode" onChange={this.ChangeDepartCode} />
                </label>
                <br />
                <label>
                    departmentAddress:
                    <input type="text" name="departmentAddress" onChange={this.ChangeDepartAddress} />
                </label>
                <br />
                    <button type="submit">Add</button>

            </form>
        </div>;
    }
}

export default InputForms;

Submit an answer

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!