React Cannot read property 'setState' of undefined

Подскажите, почему я получаю ошибку. так же указывал state без contructor и тоже получаю ошибку в данном варианте. Как мне вызвать функцию в другой функции ?

Unhandled Rejection (TypeError): Cannot read property 'setState' of undefined

в моем коде.

class Logging extends Component{
    constructor(props) {
        super(props);
        this.state = {
            showSignUp: false,
            showCreatedPopUp: false,
            newUserName:'',
        }
    }

    toggleSingInHandler = () => {
        this.setState( {showSignUp: !this.state.showSignUp} );
        console.log(this.state.showSignUp)
        const logi = document.getElementById('log-form')
        if (logi.style.display === "" || logi.style.display === 'block') {
            logi.style.display = "none";
          } else {
            logi.style.display = "block";
          }
    }



    loginHandler(e) {
        const element = document.getElementById("redirect");
        e.preventDefault();
        const us_name = document.getElementById("username").value;
        const us_email = document.getElementById("useremail").value;
        const us_pas = document.getElementById("userpass").value;
        const API_URL = '/rest_auth/login/';
        axios.post(API_URL, { username: us_name, password: us_pas, email: us_email}, {withCredentials: true})
        .then((response) => {
            if (response.status === 200 || response.status === '200' ) {
                // this.setState({isLogging: true}); 
                window.location.href = '/user_desk';
            }
          }, (error) => {
            console.log('INVALID CRUDENTIOALS', error);
          });
    }


    createNewAccount(e) {
        const element = document.getElementById("redirect");
        e.preventDefault();
        const c_username = document.getElementById("c_username").value;
        const c_lastname = document.getElementById("c_lastname").value;
        const c_firstname = document.getElementById("c_firstname").value;
        const c_pass = document.getElementById("c_pass").value;
        const c_email = document.getElementById("c_email").value;
        const API_URL = '/social_auth/user_create/';
        axios.post(API_URL, { username: c_username, password: c_pass, email: c_email, first_name: c_firstname, last_name: c_lastname}, {withCredentials: true})
        .then((response) => {
            if (response.status === 201 || response.status === '201' ) {
                this.setState({showCreatedPopUp: !this.state.showCreatedPopUp}); // ошибка получается вот тут. я не могу использовать локальный state
                this.setState({newUserName: c_firstname})
            }
          }, (error) => {
            console.log('INVALID CRUDENTIOALS', error);
          });




    }


    render() {
        return(
            <div className='loggin-main min-vh-100 p-0'>
                <div className='img-content align-centr'>
                    <img className='img-logo' src={logo} alt='logo'></img>
                </div>
                <div className='form-content'>

                        <div id='log-form' className='loggin-card'>
                            <h2 className='align-centr' >Logging with account</h2>
                            <div className='loggin-form align-centr '>
                                <input id='username'className='username-input' type='text' placeholder='Enter you username'></input>
                                <input id='useremail'className='username-input' type='email' placeholder='Enter you email'></input>
                                <input id='userpass'className='username-input' type='password' placeholder='Enter you password'></input>
                                <p className='align-center font-12'>Don't have an account? <button onClick={this.toggleSingInHandler} className='btn-link'>Click to create</button></p>
                            </div>
                            <div className='loggin-form align-centr' onClick={this.loginHandler}>
                                <button type='submit'>
                                    <a id='redirect' className='deact' href='/user_desk'>Log in</a>
                                </button>
                            </div>
                        </div>
                    

                    {this.state.showSignUp && 
                        <div id='sig-form' className='sign-card'>
                            <h2 className='align-centr '>Create new account</h2>
                            { this.state.showCreatedPopUp &&
                                <div className='new-account'>
                                    <p>{this.state.newUserName} was created successfully!</p>
                                </div>
                            }

                            <div className='sign-form align-centr '>
                                <input id='c_username' className='username-input' type='text' placeholder='Enter you username'></input>
                                <input id='c_lastname' className='name-input' type='text' placeholder='Enter you first name'></input>
                                <input id='c_firstname' className='name-input' type='text' placeholder='Enter you last name'></input>
                                <input id='c_pass' className='pass-input' type='password' placeholder='Confirm password'></input>
                                <input id='c_email' className='email-input' type='email' placeholder='Enter you email'></input>
                            </div>
                            <div className='sign-form align-centr '>
                                <button type='submit' onClick={this.toggleSingInHandler}>
                                    <a className='deact' href='/'>Sign In</a>
                                </button>
                                <button type='submit' onClick={this.createNewAccount}>
                                    <a className='deact' href='/'>Create account</a>
                                </button>
                            </div>
                        </div>
                    }   




                </div>

            </div>

            
        )
    }
}


export default Logging