Two form's error message handling on same page in react.js

Question

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.

In LoginRegistration.js I have import "Login.js" that have all login related html and respective submit function.

On html presentation, its showing fine and both form calling there own respective APIs "register / login".

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.

please let me know what I m doing wrong. here is both files code -

LoginRegister.js >>>>>

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 (
            <DefaultLayout>
                <section id="page-title">

                    <div className="container clearfix">
                        <h1>My Account</h1>
                        <ol className="breadcrumb">
                            <li><a href="/">Home</a></li>
                            <li><a href="/Customer-list">Customer list</a></li>
                            <li className="active">Login</li>
                        </ol>
                    </div>

                </section>

                <section id="content">

                    <div className="content-wrap">

                        <div className="container clearfix">

                            <div className="col_one_third nobottommargin">
                                <Login />
                            </div>

                            <div className="col_two_third col_last nobottommargin">


                                <h3>Don't have an Account? Register Now.</h3>

                                <p>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.</p>
                                <p id="msg">{this.state.registerMessage}</p>
                                <div>{this.props.registerMessage && this.props.registerMessage.status.map((msg, idx) => { 
                                         if(msg === 100) { return <span key={idx} id="succ_msg">{this.errorMapping[msg]}</span>
                                         } else {
                                              return <span key={idx} id="err_msg">{this.errorMapping[msg]}</span>
                                        }
                                    })
                                }</div>

                                <form id="register-form" name="register-form" className="nobottommargin" method="post" onSubmit={this.handleSubmit}>

                                    <div className="col_half">
                                        <label htmlFor="register-form-name">First Name:</label>
                                        <input type="text" id="register-form-firstname" name="first_name" value={this.state.first_name} className="form-control" onChange={this.handleInputChange} />
                                    </div>

                                    <div className="col_half col_last">
                                        <label htmlFor="register-form-email">Last name:</label>
                                        <input type="text" id="register-form-lastname" name="last_name" value={this.state.last_name} className="form-control" onChange={this.handleInputChange} required={true}  />
                                    </div>

                                    <div className="clear"></div>

                                    <div className="col_half">
                                        <label htmlFor="register-form-email">Email Address:</label>
                                        <input type="text" id="register-form-email" name="email" value={this.state.email} className="form-control" onChange={this.handleInputChange} required={true}   />
                                    </div>

                                    <div className="col_half col_last">
                                        <label htmlFor="register-form-repassword">Phone no.:</label>
                                        <input type="text" id="register-form-phone" name="phone_no" value={this.state.phone_no} className="form-control" onChange={this.handleInputChange} />
                                    </div>

                                    <div className="clear"></div>

                                    <div className="col_half">
                                        <label htmlFor="register-form-password">Choose Password:</label>
                                        <input type="password" id="register-form-password" name="password" value={this.state.password} className="form-control" onChange={this.handleInputChange} />
                                    </div>


                                    <div className="col_half col_last">
                                        <label htmlFor="register-form-repassword">Re-enter Password:</label>
                                        <input type="password" id="register-form-repassword" name="c_password" value={this.state.c_password} className="form-control" onChange={this.handleInputChange}  />
                                    </div>
                                    <input type="hidden" name="user_role" value={this.state.user_role} className="form-control" />  
                                    <div className="clear"></div>

                                    <div className="col_full nobottommargin">
                                        <button className="button button-3d button-black nomargin" id="reg-submit" name="register-form-submit" value="register">Register Now</button>
                                    </div>

                                </form>

                            </div>

                        </div>

                    </div>
                </section>

            </DefaultLayout>
        )
    }
}


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);

And Login.js is >>>>>>

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 (
            <div className="well well-lg nobottommargin">
                <form id="login-form" name="login-form" className="nobottommargin" action="#" method="post" onSubmit={this.handleSubmit}>

                    <h3>Login to your Account</h3>
                    <div>{this.props.loginMessage && this.props.loginMessage.status.map((msg, idx) => { 
                            return <span key={idx} id="err_msg">{this.login_errorMapping[msg]}</span>
                        })
                    }</div>
                    <div className="col_full">
                        <label htmlFor="login-form-username">Email:</label  >
                        <input type="text" id="login-form-username" name="email" value={this.state.email} className="form-control" onChange={this.handleInputChange} />
                    </div>

                    <div className="col_full">
                        <label htmlFor="login-form-password">Password:</label>
                        <input type="password" id="login-form-password" name="password" value={this.state.first_name} className="form-control" onChange={this.handleInputChange} />
                    </div>

                    <div className="col_full nobottommargin">
                        <button className="button button-3d nomargin" id="login-form-submit" name="login-form-submit" value="login">Login</button>
                        <a href="#" className="fright">Forgot Password?</a>
                    </div>

                </form>
            </div>
        );
    }
}

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);

Answer 1

You Login component also uses the same error message that is set up for register component and hence the problem.

You need to make a few changes,

In you reducer, separate the login and register message into RegisterData and LoginData and then change the mapStateToProps in the Login.js and LoginRegister.js to be

function mapStateToProps(state){
    console.log("View Login data :"+JSON.stringify(state.data));
    return { 
        loginMessage: state.LoginData
    }
}

and

 function mapStateToProps(state){
    console.log("View Login data :"+JSON.stringify(state.data));
    return { 
        registerMessage: state.RegisterData
    }
}

respectively