How to show message in react js

Question

I am new to react js. I have created one login application and tried to call login rest service but I am not able to show messages .

I have used var self = this as I am not able to access this keyword in axiom then method

Below is code for button submit

       handleSubmit = event => {

          console.log(this);
          event.preventDefault();

          var loginURL = 'http://localhost:8080/rest-api/user/login';
          var bodyFormData = new FormData();
          bodyFormData.set('uname', this.state.uname);
          bodyFormData.set('password', this.state.password);

          var self = this;

          axios({
            method: 'post',
            url: loginURL,
            data: bodyFormData,
            config: { headers: {'Content-Type': 'multipart/form-data' }}
            })
            .then(function (response) {
                //handle success

                console.log('self before');
                console.log(self);

                if(response.data.result === 'Success'){
                      self.setState({
                       loginSuccess: true,
                       responseData: response.data
                     });
                } else {           
                    self.setState({
                       loginSuccess: false,
                       responseData: response.data,
                       message : response.data.message
                     });                   
                }

                console.log('self after');
                console.log(self);

            })
            .catch(function (response) {
                //handle error
                console.log(response);
          });

   }

And here is my html..

 render() {

  if(this.state.loginSuccess){
    return (
      <Home/>
    );
  }
  return (

    <div>

     <Header/>

     <div className="Login">
        <form onSubmit={this.handleSubmit}>  

          <div className="form-group form-group-lg">
            <label htmlFor="uname" className="control-label">Username</label>
            <input type="text" id="uname" className="form-control" value={this.state.uname} onChange={this.handleChange}/>
          </div>

          <div className="form-group form-group-lg">
            <label htmlFor="password" className="control-label">Password</label>
            <input type="password" id="password" className="form-control" value={this.state.password} onChange={this.handleChange}/>
          </div>

          <div className={ this.state.loginSuccess ? '' : 'hidden'}>          
             <div className="alert alert-danger">{ this.state.message }</div> 
          </div>

          <button disabled={!this.validateForm()} type="submit" className="btn btn-lg btn-primary btn-block">Login</button>

        </form>  
      </div>

      <div className="footer">
          <Footer/>
      </div>

    </div>

    );    
}

How can I handle { this.state.loginSuccess ? '' : 'hidden'} in above code..? How to show error or success message in react js..?

Answer 1

use arrow function in callback to keep the scope of state

 axios({
            method: 'post',
            url: loginURL,
            data: bodyFormData,
            config: { headers: {'Content-Type': 'multipart/form-data' }}
            })
            .then((response)=> {  //<------------- HERE
                //handle success

                console.log('self before');
                console.log(self);

                if(response.data.result === 'Success'){
                      this.setState({
                       loginSuccess: true,
                       responseData: response.data
                     });
                } else {           
                    this.setState({
                       loginSuccess: false,
                       responseData: response.data,
                       message : response.data.message
                     });                   
                }

                console.log('self after');
                console.log(self);

            })
            .catch(function (response) {
                //handle error
                console.log(response);
          });