title: Two form's error message handling on same page in react.js
body: <p>I have installed react using "create-react-app" command, and its running fine. I am trying to make login and registration on same page. i have one component file with name Loginregistration.js that have registration form and all related methods. </p>
  
  <p>In LoginRegistration.js I have import "Login.js" that have all login related html and respective submit function. </p>
  
  <p>On html presentation, its showing fine and both form calling there own respective APIs "register / login". </p>
  
  <p>But as i have mapped both forms related error message as per return response code. But as I have import Login.js in LoginRegister.js, its showing message as per LoginRegister.js and respective place also. </p>
  
  <p>please let me know what I m doing wrong. here is both files code  - </p>
  
  <p>LoginRegister.js >>>>></p>
  
  <pre><code>import React from 'react'; 
  import DefaultLayout from '../Layout/DefaultLayout';
  import { connect } from 'react-redux'; 
  import { userSignupRequest } from '../actions/signupActions';
  import { bindActionCreators } from 'redux';
  import Login from './Login';
  
  
  class LoginRegister extends React.Component {
      constructor(props) {
          super(props);
          document.title = "Login-Register";
          this.errorMapping = {"101": "Unexpected error occurred. Please try again later.",
      "102": "This email is already connected to a account.",
      "103": "First name cannot be empty",
      "104": "Incorrect first name",
      "105": "Last Name cannot be empty",
      "106": "Incorrect last name",
      "107": "Email cannot be empty",
      "108": "Incorrect email address",
      "109": "Password cannot be empty",
      "110": "password minimum length is 6 characters",
      "111": "password maximum length is 50 characters",
      "112": "Confirm password does not match",
      "113": "Phone no can not be empty",
      "114": "Incorrect user role"
  }
  
          this.state = {first_name: '',last_name: '',email:'',password:'',c_password:'', phone_no:'',user_role:2, errmsg:''};
  
          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(){
          console.log(this.props.registerMessage);
          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="/Customer-list"&gt;Customer list&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_one_third nobottommargin"&gt;
                                  &lt;Login /&gt;
                              &lt;/div&gt;
  
                              &lt;div className="col_two_third col_last nobottommargin"&gt;
  
  
                                  &lt;h3&gt;Don't 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.registerMessage}&lt;/p&gt;
                                  &lt;div&gt;{this.props.registerMessage &amp;&amp; this.props.registerMessage.status.map((msg, idx) =&gt; { 
                                           if(msg === 100) { return &lt;span key={idx} id="succ_msg"&gt;{this.errorMapping[msg]}&lt;/span&gt;
                                           } else {
                                                return &lt;span key={idx} id="err_msg"&gt;{this.errorMapping[msg]}&lt;/span&gt;
                                          }
                                      })
                                  }&lt;/div&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;
          )
      }
  }
  
  
  function mapStateToProps(state){
      console.log("View data :"+JSON.stringify(state.data));
      return { 
          registerMessage: state.data
      }
  }
  function mapDispatchToProps(dispatch) {
        return bindActionCreators({userSignupRequest: userSignupRequest}, dispatch)
  }
  export default connect(mapStateToProps, mapDispatchToProps) (LoginRegister);
  </code></pre>
  
  <p>And Login.js is  >>>>>></p>
  
  <pre><code>import React from 'react'; 
  import { connect } from 'react-redux'; 
  import { userSignInRequest } from '../actions/signupActions';
  import { bindActionCreators } from 'redux';
  
  
  
  class Login extends React.Component {
      constructor(props) {
          super(props);
          this.login_errorMapping = { "101": "Unexpected error occurred, Please try again later",
      "102": "Incorrect email or password.",
      "103": "Email cannot be empty",
      "104": "incorrect email address",
      "105": "Password cannot be empty",
      "106": "Your account  is deactivated"}
          this.state = {email:'',password:''};
  
          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.userSignInRequest(this.state);
      }   
  
      render(){
          console.log(this.props.loginMessage);
  
          return (
              &lt;div className="well well-lg nobottommargin"&gt;
                  &lt;form id="login-form" name="login-form" className="nobottommargin" action="#" method="post" onSubmit={this.handleSubmit}&gt;
  
                      &lt;h3&gt;Login to your Account&lt;/h3&gt;
                      &lt;div&gt;{this.props.loginMessage &amp;&amp; this.props.loginMessage.status.map((msg, idx) =&gt; { 
                              return &lt;span key={idx} id="err_msg"&gt;{this.login_errorMapping[msg]}&lt;/span&gt;
                          })
                      }&lt;/div&gt;
                      &lt;div className="col_full"&gt;
                          &lt;label htmlFor="login-form-username"&gt;Email:&lt;/label  &gt;
                          &lt;input type="text" id="login-form-username" name="email" value={this.state.email} className="form-control" onChange={this.handleInputChange} /&gt;
                      &lt;/div&gt;
  
                      &lt;div className="col_full"&gt;
                          &lt;label htmlFor="login-form-password"&gt;Password:&lt;/label&gt;
                          &lt;input type="password" id="login-form-password" name="password" value={this.state.first_name} className="form-control" onChange={this.handleInputChange} /&gt;
                      &lt;/div&gt;
  
                      &lt;div className="col_full nobottommargin"&gt;
                          &lt;button className="button button-3d nomargin" id="login-form-submit" name="login-form-submit" value="login"&gt;Login&lt;/button&gt;
                          &lt;a href="#" className="fright"&gt;Forgot Password?&lt;/a&gt;
                      &lt;/div&gt;
  
                  &lt;/form&gt;
              &lt;/div&gt;
          );
      }
  }
  
  function mapStateToProps(state){
      console.log("View Login data :"+JSON.stringify(state.data));
      return { 
          loginMessage: state.data
      }
  }
  function mapDispatchToProps(dispatch) {
        return bindActionCreators({userSignInRequest: userSignInRequest}, dispatch)
  }
  export default connect(mapStateToProps, mapDispatchToProps) (Login);
  </code></pre>