Login Form Not POSTing Correctly - node.js

Question

I'm developing a login form with react-native. My back-end definitely works, but I have included it below for reference (I've tested this by using a curl command). Anyway, I'm trying to figure out why this react-native login form doesn't POST on form submission. Whenever I attempt to debug by simply adding an alert("test") it seems to call _handleSubmit() whenever there is a detected change in either of the FormInputs. Below is the react-native code:
import React from 'react';
import { FormInput } from 'react-native-elements';
import {Animated, View, TouchableOpacity} from 'react-native';
import cssta from "cssta/native";
import Config from 'react-native-config';
const LoginButtonContainer = cssta(Animated.View)`
--primary: white;
--foreground: var(--primary);
--background: #1b2535;
padding: 10px;
background-color: var(--background);
`;
const LoginButtonText = cssta(Animated.Text)`
color: var(--foreground);
text-align: center;
`;
const RegisterButtonContainer = cssta(Animated.View)`
--primary: #1b2535;
--foreground: var(--primary);
--background: white;
padding: 10px;
border: 1px solid var(--primary);
background-color: var(--background);
`;
const RegisterButtonText = cssta(Animated.Text)`
color: var(--foreground);
text-align: center;
`;
export default class Login extends React.Component {
constructor() {
super();
this.state = {
username: '',
password: ''
};
}
_handleSubmit() {
let username = this.state.username;
let password = this.state.password;
fetch('http://localhost:4200/login', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({username: username, password: password})
}).then((response) => JSON.stringify(response.json()))
.then((responseData) => { console.log("response: " + responseData); })
.catch((err) => { console.log(err); });
}
_onRegisterClick() {
}
render() {
return(
<View style={{justifyContent: 'space-between'}}>
<FormInput
placeholder='Username'
onChangeText={(username) => this.setState({username})}
value={this.state.username}
/>
<FormInput
placeholder='Password'
onChangeText={(password) => this.setState({password})}
value={this.state.password}
/>
<TouchableOpacity onPress={this._handleSubmit()}>
<LoginButtonContainer>
<LoginButtonText>Login</LoginButtonText>
</LoginButtonContainer>
</TouchableOpacity>
<TouchableOpacity onPress={this._onRegisterClick()}>
<RegisterButtonContainer>
<RegisterButtonText>Register</RegisterButtonText>
</RegisterButtonContainer>
</TouchableOpacity>
</View>
)
}
};
The next bit of code is a snippet of my back-end code
import models from './models';
import mongoose from 'mongoose';
const express = require('express');
import bodyParser from 'body-parser';
const app = express();
app.use('/', express.Router());
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(bodyParser.json());
app.set('view engine', 'ejs');
const PORT = 4200;
app.post('/login', (req, res) => {
console.log(req.body.username);
});
app.listen(PORT, () => {
console.log(`Server is running at PORT ${PORT}`);
});

Answer 1

On Press Function accepts a function as an arguments. But in your code rahter then passing a function you are invoking the funtion.
<TouchableOpacity onPress={this._handleSubmit()}>
Change To
<TouchableOpacity onPress={()=> this._handleSubmit()}>

Answer 2

Try This code
let _username = this.state.username;
let _password = this.state.password;
let params = {
username: _username,
password: _password
};
var formBody = [];
for (var property in params) {
var encodedKey = encodeURIComponent(property);
var encodedValue = encodeURIComponent(params[property]);
formBody.push(encodedKey + "=" + encodedValue);
}
formBody = formBody.join("&");
let fetchData = {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
},
body: formBody
};
fetch("http://localhost:4200/login", fetchData)
.then(response => JSON.stringify(response.json()))
.then(responseData => {
console.log("response: " + responseData);
})
.catch(err => {
console.log(err);
});