Why do I have undefined parameters when I post data with axios?

Question

I'm trying to post information about a new user for my db, but when I post data, it returns this error in the console: "POST http://localhost:8080/v1/register 400 (Bad Request)" and specifies that parameters are undefined.

I use react to display the form and I use a nodejs api.

Thank you and I hope you can help me to resolve this problem.

Register.js

import {Component} from "react";
import axios from "axios";


export class Register extends Component {

    constructor(props) {
        super(props);

        this.state = {
            username: '',
            lastName: '',
            firstName: '',
            email: '',
            password: '',
            address: ''
        }
    }

    changeHandler = event => {
        this.setState({[event.target.name]: event.target.value});
    }

    submitHandler = event => {
        event.preventDefault();
        console.log(this.state);
        console.log(JSON.stringify(this.state));
        axios("http://localhost:8080/v1/register", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(this.state)
        }).then(res => {
                console.log(res)
            })
            .catch(err => {
                console.log(err)
            })
    }

    render () {
        const {username, lastName, firstName, email, password, address} = this.state;
        return (
            <div>
                <form onSubmit={this.submitHandler}>
                    <input placeholder="Choose a username" type="text" name="username" value={username} onChange={this.changeHandler}/>
                    <input placeholder="Your last name" type="text" name="lastName" value={lastName} onChange={this.changeHandler}/>
                    <input placeholder="Your first name" type="text" name="firstName" value={firstName} onChange={this.changeHandler}/>
                    <input placeholder="Your email" type="email" name="email" value={email} onChange={this.changeHandler}/>
                    <input placeholder="Choose a password" type="password" name="password" value={password} onChange={this.changeHandler}/>
                    <input placeholder="Your home address" type="text" name="address" value={address} onChange={this.changeHandler}/>
                    <button type="submit">Register</button>
                </form>
            </div>
        )
    }
}


export default Register;

register.js

const express = require('express');
const pool = require('../connection/database');
const router = express.Router();


router.post('/', async (req, res) => {
    try {
        const data = {
            username: req.body.username,
            lastName: req.body.lastName,
            firstName: req.body.firstName,
            email: req.body.email,
            password: req.body.password,
            address: req.body.address
        };
        const query = "INSERT INTO User (username, last_name, first_name, email, password, address) VALUES (?, ?, ?, ?, SHA2(?, 256), ?)";
        await pool.query(query, Object.values(data));
        res.status(201).send("The user has been successfully created.");
    }
    catch (err) {
        res.status(400).send(err.message);
    }
});


module.exports = router;

Answer 1

Expecting that you have added cors policy. Small change you have to do. You have to pass data to 'data' property not body. Do following change while making request.

submitHandler = event => {
    debugger;
    event.preventDefault();
    axios("http://localhost:3000/v1/register", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        data: JSON.stringify(this.state)
    }).then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })
}