Why am I getting an error 400 response instead of my expected response?


I am creating an Application using React Native and Node.js at the backend. I am using Axios to call the API services. The API will show a response if a user is created successfully. Fortunately it shows. However if an user already exists, then it is still supposed to return a message by saying “User already exists”. This however works with postman but unfortunately when I try from my react native front-end, I am getting an Error 400. Basically, I want to show my user that particular message where the API returns that user already exists. Here is my code:

import React, { Component } from "react";
import { render } from "react-dom";
import { ImageBackground, SafeAreaView, StyleSheet, View, Image, Text, Button, TouchableWithoutFeedback, TouchableOpacity, TextInput } from "react-native";
import axios from "axios";

class Welcome extends Component {

    constructor() {
        this.state = {
            username : "",
            email : "",
            password: "",

    submit = () => {

        //Here comes the magic
        .post(`http://localhost:8080/api/auth/signup`, {
            username: this.state.username,
            email: this.state.email,
            password: this.state.password,
        .then((response) => {

    render() {

        const test = () => {

            console.log("Test Completed");

        const buttonFeedback = (data) => {

            if(data === 1) {
                console.log("Login Button Detected!");
            if(data === 2) {
                console.log("Registration Button Detected!");

        return (
            <ImageBackground style={styles.background}
            <View style={styles.logoContainer}>
            <Image style={styles.logo} source={require("../assets/icon.png")}/>
            <Text>Welcome to our application</Text>

            placeholder="Your Email"
            onChangeText={(text)=> {this.setState({ email: text})}}

            placeholder="Your Username"
            onChangeText={(text)=> {this.setState({ username: text})}}

            placeholder="Your Password"
            onChangeText={(text)=> {this.setState({ password: text})}}

            <Button title="Register" onPress={()=> this.submit()}/>
            <TouchableOpacity style={styles.loginButton} onPress={()=> buttonFeedback(1)}>
            <View><Text style={styles.text}>Log In</Text></View>
            <TouchableOpacity style={styles.registerButton} onPress={()=> buttonFeedback(2)}>
            <View><Text style={styles.text}>Register</Text></View>
export default Welcome;

const styles = StyleSheet.create({
    background: {
        flex: 1,
        justifyContent: "flex-end",
        alignItems: "center"
    loginButton: {
        width: '100%',
        height: 70,
        backgroundColor: '#fc5c65',
        alignItems: 'center'
    registerButton: {
        width: '100%',
        height: 70,
        backgroundColor: '#4ecdc4',
        alignItems: 'center'
    logo: {
        width: 100,
        height: 100,
    logoContainer: {
        position: "absolute",
        top: 70,
        alignItems: "center"
    text: {
        color: 'white',

Can anyone tell me how to resolve this?

What is happening in your server? If it is not returning what you need it to return, can you see what the problem is on the server?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.