Sending formData with ReactJS to Express API and taking a responding JSON

Question

Trying to get the ReactJS frontend to send in a username and password from a form to my express api via a proxy, and then have the app.post in the API return a JSON file of a user id. Proxy connection works fine, but when I send the username and password states to the API, it comes through as 'undefined' on the other end. Not sure if it's an issue with my handlers, event code/forms, or my express API.

ReactJS:

import React, { Component } from 'react'
import '../public/styles/App.css'
import Header from "./header.js"

var recID = []

export default class Login extends Component {

    constructor() {
        super()
        this.state = {
            isLoggedIn: false,
            username: "",
            password: "",
            user: []
        }

        this.checkLogin = this.checkLogin.bind(this)
        this.handleUsernameChange = this.handleUsernameChange.bind(this)
        this.handlePasswordChange = this.handlePasswordChange.bind(this)
    }

    handleUsernameChange = (e) => {
        this.setState({username: e.target.value});
    }

    handlePasswordChange = (e) => {
        this.setState({password: e.target.value});
    }

    checkLogin(e) {
        e.preventDefault()
        fetch('/api/login', {
            method: 'POST',
            body: JSON.stringify({"user": this.state.username, "pass": this.state.password}),
            headers: {'Content-Type': 'application/json'}
        })
        .then(response => response.json())
        .then(user_id => this.setState({user: user_id}))
        recID = recID.concat(this.state.user)
        if (recID.length == 6) {
            this.setState({isLoggedIn: true})
        }
    }

    loginScreen() {
        return(   
            <div style={{border:"none"}}>
                <div style={{background:"white"}}>
                <br></br>
                    <center><Header /></center>
                <br></br>
            </div>
            <br></br>
            <br></br>
            <div style={{background:"white"}}>
                <center><form onSubmit={e => this.checkLogin(e)}>
                    <br></br>
                    Username: <br></br>
                    <input type = "text" name= "username" onChange={this.handleUsernameChange}></input>
                    <br></br>
                    <br></br>
                    Password: <br></br>
                    <input type = "text" name = "password" onChange={this.handlePasswordChange}></input>
                    <br></br>
                    <br></br>
                    <input type = "submit" value = "Log-in"></input>
                    <br></br>
                </form></center>
                <br></br>
            </div>
        </div>
    )
}

    success() {
        return (
            <div>
              <p>TEST</p>
              {this.state.user && this.state.user.map(us => <div key={us.user_id}> {us.user_id} </div>)}
            </div>
          )
    }

    render() {
            if (this.state.isLoggedIn == true) {
                return (
                    this.success()
                )
            }
            else {
                return (
                    this.loginScreen()
                )
            }
    }
}

Relevant NodeJS API Code:

'use strict'

const express = require('express')
const bodyParser = require('body-parser')

const users = require('./modules/user_management.js')

const app = express()
const port = 8080

app.use(bodyParser.urlencoded({extended: false}))

app.post("/api/login", async(req, res) => {
    const id = await users.login(req.body.user, req.body.pass)
    console.log(id)
    res.json(id)
})

app.listen(port, () => console.log(`Server is listening on port ${port}`))

Answer 1

In your Node.js file, make sure to add:

app.use(bodyParser.json());

as it is currently only set up to parse urlencoded input.

Also, if that doesn't work, try removing the JSON.stringify in the fetch function, as I am not sure if that is necessary since you are already using body-parser.

EDIT - Nevermind, I was wrong about this. The JSON.stringify should be left in the original fetch call.

If neither of those two work, let me know and I'd be happy to come up with some additional suggestions.

Cheers, Gabe