title: show messages on the basis of API response in react js
body: <p>I have installed react using - create-react-app . I am submitting form using <code>onSubmit()</code>  function. On submitting form from <code>LoginRegister.js</code> Component, below is my LoginRegister.js file code  - </p>
  
  <pre><code>import React from 'react'; 
  import DefaultLayout from '../Layout/DefaultLayout';
  import PropTypes from 'prop-types';
  import { connect } from 'react-redux'; 
  import { userSignupRequest } from '../actions/signupActions';
  
  
  
  class LoginRegister extends React.Component {
      constructor(props) {
      super(props);
          this.state = {first_name: '',last_name: '',email:'',password:'',c_password:'', phone_no:'',user_role:2, errmsg:''};
          //this.state = {about: ''};
  
          this.handleInputChange = this.handleInputChange.bind(this);
          this.handleSubmit = this.handleSubmit.bind(this);
      }
  
  
      handleInputChange(event) {
          this.setState({ [event.target.name]: event.target.value});
        }
  
      handleSubmit(event) {
          event.preventDefault();
          this.props.userSignupRequest(this.state);
      }   
  
      render(){
          return (
              &lt;DefaultLayout&gt;
                  &lt;section id="page-title"&gt;
  
                      &lt;div className="container clearfix"&gt;
                          &lt;h1&gt;My Account&lt;/h1&gt;
                          &lt;ol className="breadcrumb"&gt;
                              &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="/"&gt;Pages&lt;/a&gt;&lt;/li&gt;
                              &lt;li className="active"&gt;Login&lt;/li&gt;
                          &lt;/ol&gt;
                      &lt;/div&gt;
  
                  &lt;/section&gt;
  
                  &lt;section id="content"&gt;
  
                      &lt;div className="content-wrap"&gt;
  
                          &lt;div className="container clearfix"&gt;
                              &lt;div className="col_two_third col_last nobottommargin"&gt;
  
  
                                  &lt;h3&gt;Dont have an Account? Register Now.&lt;/h3&gt;
  
                                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, vel odio non dicta provident sint ex autem mollitia dolorem illum repellat ipsum aliquid illo similique sapiente fugiat minus ratione.&lt;/p&gt;
                                  &lt;p id="msg"&gt;{this.state.errmsg}&lt;/p&gt;
                                  &lt;form id="register-form" name="register-form" className="nobottommargin" method="post" onSubmit={this.handleSubmit}&gt;
  
                                      &lt;div className="col_half"&gt;
                                          &lt;label htmlFor="register-form-name"&gt;First Name:&lt;/label&gt;
                                          &lt;input type="text" id="register-form-firstname" name="first_name" value={this.state.first_name} className="form-control" onChange={this.handleInputChange} /&gt;
                                      &lt;/div&gt;
  
                                      &lt;div className="col_half col_last"&gt;
                                          &lt;label htmlFor="register-form-email"&gt;Last name:&lt;/label&gt;
                                          &lt;input type="text" id="register-form-lastname" name="last_name" value={this.state.last_name} className="form-control" onChange={this.handleInputChange} required={true} /&gt;
                                      &lt;/div&gt;
  
                                      &lt;div className="clear"&gt;&lt;/div&gt;
  
                                      &lt;div className="col_half"&gt;
                                          &lt;label htmlFor="register-form-email"&gt;Email Address:&lt;/label&gt;
                                          &lt;input type="text" id="register-form-email" name="email" value={this.state.email} className="form-control" onChange={this.handleInputChange} required={true} /&gt;
                                      &lt;/div&gt;
  
                                      &lt;div className="col_half col_last"&gt;
                                          &lt;label htmlFor="register-form-repassword"&gt;Phone no.:&lt;/label&gt;
                                          &lt;input type="text" id="register-form-phone" name="phone_no" value={this.state.phone_no} className="form-control" onChange={this.handleInputChange} /&gt;
                                      &lt;/div&gt;
  
                                      &lt;div className="clear"&gt;&lt;/div&gt;
  
                                      &lt;div className="col_half"&gt;
                                          &lt;label htmlFor="register-form-password"&gt;Choose Password:&lt;/label&gt;
                                          &lt;input type="password" id="register-form-password" name="password" value={this.state.password} className="form-control" onChange={this.handleInputChange} /&gt;
                                      &lt;/div&gt;
  
                                      &lt;div className="col_half col_last"&gt;
                                          &lt;label htmlFor="register-form-repassword"&gt;Re-enter Password:&lt;/label&gt;
                                          &lt;input type="password" id="register-form-repassword" name="c_password" value={this.state.c_password} className="form-control" onChange={this.handleInputChange} /&gt;
                                      &lt;/div&gt;
                                      &lt;input type="hidden" name="user_role" value={this.state.user_role} className="form-control" /&gt;  
                                      &lt;div className="clear"&gt;&lt;/div&gt;
  
                                      &lt;div className="col_full nobottommargin"&gt;
                                          &lt;button className="button button-3d button-black nomargin" id="reg-submit" name="register-form-submit" value="register"&gt;Register Now&lt;/button&gt;
                                      &lt;/div&gt;
  
                                  &lt;/form&gt;
  
                              &lt;/div&gt;
  
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/section&gt;
  
              &lt;/DefaultLayout&gt;
          )
      }
  }
  
  LoginRegister.propTypes = {
      userSignupRequest: PropTypes.func.isRequired    
  }
  
  export default connect((state) =&gt; { return{} }, {userSignupRequest} ) (LoginRegister); 
  </code></pre>
  
  <p>and action/signupActions file have below code, that calling API and handling response using <code>Reducer</code> - </p>
  
  <pre><code>import axios from 'axios'; 
  
  export function userSignupRequest(userData){
          return dispatch =&gt; {
              dispatch({"type":"CALL_START"});
              axios.post('../user/register', userData).then(response =&gt; {
                dispatch({"type":"RECEIVE_RESPONSE", "payload":response.data});
              }).catch(error =&gt; {
                  dispatch({"type":"RECEIVE_ERROR", "payload":error});
              });
          }
  
      }
  </code></pre>
  
  <p>Reducer.js having below code - </p>
  
  <pre><code>const reducer = (state={}, action) =&gt; {
      switch(action.type){
          case "CALL_START" :{
              alert("Hi1");
              return {}
              break;  
          }
          case "RECEIVE_RESPONSE" : {
              //return {...state, data:action.payload}
              alert("Hi2");
              return {data:action.payload}
              break;
          }
          case "RECEIVE_ERROR" : {
              alert("Hi3");
              alert(JSON.stringify(action.payload));
              return {data:action.payload}
              break;
          }
  
      }   
  
  }   
  
  export default reducer;
  </code></pre>
  
  <p>API is calling and I am getting response properly, But here I don't know how to show success/error message on my 'LoginRegister.js' component on th basis of response.</p>
  
  <p>Please help me to sort out this. </p>