React Native Redux - Add dynamic property to TextBox OnClick of button

Question

I have used native base in my react native application. I also used react redux. below is code of my screen file

handleSubmit = () => {
  // Add Logic here for adding error if email or password is empty
   //this.props.login(this.props.email, this.props.password)
   
}
<Item error={this.props.emailError}>
  <Input  placeholder='Email'
          autoCapitalize="none" 
          onChangeText={this.props.changeEmailValue}/>
</Item>
<Item error={this.props.passwordError}>
  <Input  placeholder='Password'
          autoCapitalize="none" 
          onChangeText={this.props.changePasswordValue}
          secureTextEntry />
</Item>        
<LoginButton title="Login"  onPress={this.handleSubmit}/>
...
...
const mapStateToProps = (state) => {
  return {
    email: state.user.email,
    password: state.user.password,
    isAuthenticated: state.user.isAuthenticated,
    emailError: state.user.emailError,
    passwordError: state.user.passwordError,
    loginError: state.user.error
  }
}

const mapDispatchToProps = dispatch => {
  return {
      changeEmailValue: (email) => dispatch(handleEmailChange(email)),
      changePasswordValue: (password) => dispatch( handlePasswordChange(password)),
      login: (email,password) => dispatch( login( email, password) ),
  };
};

below is my code for reducers/user.js

 case LOGIN: 
      if(action.payload.email === '' || action.payload.email === undefined){
        return {
          ...state,
          emailError: true
        }
      }
      else if (action.payload.password === '' || action.payload.password === undefined){
        return {
          ...state,
          passwordError: true
        }
      }
      else {
        return {
          ...state,
          email: action.payload.email,
          password: action.payload.password
        }
      }

In simple login screen, If text box is empty then I need to add "error" property for that Input TextBox. You can check here for error textbox in native base

How can i set value for emailError and passwordError ? Currently it is showing error for only emailError or passwordError, i want to check for both.

Answer 1

You can set the error prop of Item like this:

<Item error={this.state.emailError}>
  <Input placeholder='Email'
         autoCapitalize="none" 
         onChangeText={this.props.changeEmailValue}
  />
</Item>

In your constructor, keep emailError as false. Then, when you check if e-mail address is valid or not in handleSubmit, you can set it to true if you want to enable the error like this:

this.setState({ emailError: true });

UPDATE:

I don't have any experience with Redux so I may not be able to give you the best solution here. However, under case LOGIN: in your reducer, only one of the if-else blocks will run, that is why only one type of error will be caught here. You could try something along the lines of:

case LOGIN:

  let emailError = false;
  let passwordError = false;

  if (action.payload.email === '' || action.payload.email === undefined)
    emailError = true

  if (action.payload.password === '' || action.payload.password === undefined)
    passwordError = true

  if ( emailError || passwordError ) {
    return {
      ...state,
      emailError: emailError,
      passwordError: passwordError
    }
  }
  else {
    return {
      ...state,
      email: action.payload.email,
      password: action.payload.password
    }
  }

Again, I am not sure if/how much of this is correct, but it may at least give you an idea.

Answer 2

 case LOGIN: 
      if(action.payload.email === '' || action.payload.email === undefined){

     ***`You are returning here when email blank`***

    return { 
          ...state,
          emailError: true
        }
      }
      else if (action.payload.password === '' || action.payload.password === undefined){
        return {
          ...state,
          passwordError: true
        }
      }
      else {
        return {
          ...state,
          email: action.payload.email,
          password: action.payload.password
        }
      }

Your code should return including email and password.

 case LOGIN: 
      let eError = false;
      let pError = false;
      if(action.payload.email === '' || action.payload.email === undefined){
         eError = true
      }
      else if (action.payload.password === '' || action.payload.password === undefined){
          pError = true
      }
      else {
        pError = false;
        pError = false;
      }
   return {
          ...state,
          emailError: eError,
          passwordError: pError,
          email: action.payload.email,
          password: action.payload.password
        }

This code has not executed but sure would work.