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

[saditsnigdho]

0

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() {
        super();
        this.state = {
            username : "",
            email : "",
            password: "",
        }
    }

    submit = () => {
        console.log(this.state.email);
        console.log(this.state.username);
        console.log(this.state.password);

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

    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}
            source={require("../assets/background.png")}>
            <View style={styles.logoContainer}>
            <Image style={styles.logo} source={require("../assets/icon.png")}/>
            <Text>Welcome to our application</Text>
            <br></br>

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

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

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

            <Button title="Register" onPress={()=> this.submit()}/>
            </View>
        
            <TouchableOpacity style={styles.loginButton} onPress={()=> buttonFeedback(1)}>
            <View><Text style={styles.text}>Log In</Text></View>
            </TouchableOpacity>
        
            <TouchableOpacity style={styles.registerButton} onPress={()=> buttonFeedback(2)}>
            <View><Text style={styles.text}>Register</Text></View>
            </TouchableOpacity>
        
            </ImageBackground>
            </>
            );
        }
}
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?

[kevinSmith]

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?