useState not working outside of input field (function based Reactjs)

Question

I'm using Stateful variables for a signup component on my website. I am sending username and password to my server, then returning a user id number. If I get an error, I am trying to set the errorMsg stateful variable to equal the error message returned. useState works for changing the value in the input field, but it isn't working for the other parts of my app. It doesn't work for Stateful variables passed as props as well. Here is my code.

import React from 'react';
import {useState} from 'react';
import { Link, Redirect } from 'react-router-dom';
import bcrypt from 'bcryptjs';
import axios from 'axios';


export default function Signup(props) {

    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [password2, setPassword2] = useState('');
    const [openModal, setOpenModal] = useState(false);
    const [errorMsg, setErrorMsg] = useState('');
    let isAvailable = '';
    let id = null;
    let test = [];
    let axiosError = '';

    async function submitAccount() {
        const salt = bcrypt.genSaltSync(10);
        const hash = bcrypt.hashSync(password, salt)
        if (bcrypt.compareSync(password2, hash)) {

            await axios.post('http://localhost:5000/players/signup', {
            username: username,
            password: password})
            .then(res => {id = res.data; console.log(id)})
            .catch (err => {axiosError = err; console.log(axiosError)})

            if (axiosError != '') {
                axiosError = ''
                setErrorMsg('This username is taken. Try another')
                setUsername('')
                setPassword('')
                setPassword2('')
                setOpenModal(true)
                console.log(errorMsg)
                console.log(openModal)
            }

            else {
                console.log(id)  
            }
        }
    }    

    const handleClose = () => {
        setOpenModal(false);
    };

    return (
        <div>
            <form>
            <input type="text" label='username'
                onChange={e => setUsername(e.target.value)}
            />
            <input type="text" 
                onChange={e => setPassword(e.target.value)}
            />
            <input type="text"
                onChange={e => setPassword2(e.target.value)}/>
            </form>
            <button onClick={submitAccount}>Confirm</button>
            <p>The results are{props.cookies}</p>
        </div>

    )

}

Here is my code sandbox as well: https://codesandbox.io/s/epic-lalande-v1nl3?file=/src/App.js .Thanks for the help!

Answer 1

the way that you want to get error is not correct i suggest you to do it in the except closure

            await axios.post('http://localhost:5000/players/signup', {
            username: username,
            password: password})
            .then(res => {id = res.data; console.log(id)})
            .catch (err => {
                // axiosError = ''
                setErrorMsg('This username is taken. Try another')
                setUsername('')
                setPassword('')
                setPassword2('')
                setOpenModal(true)
                console.log(errorMsg)
                console.log(openModal)
            })
        }  
    ..........
}