State for error and success message not getting clear in expo project

Question

I have an expo project in react-native in which I have created form and otp verification based on which success and error messages will be flashed. The state are getting populated correctly but the error message or success message still persists even after the action is completed. I am using context for the response and state.

Code Snippet for context file

 const authReducer = (state, action) => {
        switch (action.type) {
          case 'add_error':
            return { ...state, errorMessage: action.payload };
         
          case 'clear_error_message':
            return { ...state, errorMessage: ''};
    
          case 'voter_auth':
            return {  successMessage: action.payload };
    
          case 'otp_success':
              return { successMessage: action.payload };
          
          
          
           
              default:
                return state;
        }
      };
      const clearErrorMessage = dispatch => () => {
         dispatch({ type: "clear_error_message" });
      };
      
    const authVoters = dispatch => async ({id, mailId, mobNum}) => {
      
           let response = await trackerApi.post('/addVoters' ,  {id, mailId, mobNum});
          
    
        if (response.data === 'Success') {
           navigate('Face', id);
    
        }
     
         else if (id === ''  || mobNum === '' || mailId === '' )
        {
          dispatch({
            type: 'add_error',
            payload: 'Please Enter The Mandatory Fields'
          });
        }
        else {    
            dispatch({
                type: 'add_error',
                payload: 'Voter is Not Registered'
              });
            }
              
    
    };
    
    
    
    Code snippet for message display in Screen.js
    
    {state.errorMessage ? (
         showMessage({
            message: state.errorMessage,
            type: "danger",
            icon: "danger"
          })
             
            ) : null}
    { {state.successMessage ? (
              showMessage({
                message: state.successMessage,
                type: "success",
                icon: "success"
              })
            ) : null} }

Console for state:

State  Object {
      "errorMessage": "Please Enter The Mandatory Fields",
      "successMessage": "Mobile Number Verified",
   }

Please help me handle the error and success state.

Answer 1

I managed to fix the issue with a small trick:

In Context File, create clearErrorMessage which will assign '' to the state.

const authReducer = (state, action) => {
        switch (action.type) {
          case 'add_error':
            return { ...state, errorMessage: action.payload };
         
          case 'clear_error_message':
            return { ...state, errorMessage: '', successMessage: ''};
    
          case 'voter_auth':
            return {  successMessage: action.payload };
    
          case 'otp_success':
              return { successMessage: action.payload };
          
              default:
                return state;
        }
      };
      const clearErrorMessage = dispatch => () => {
         dispatch({ type: "clear_error_message" });
      };


  Add Navigation to the screen:
    <NavigationEvents onWillFocus={clearErrorMessage} />

While setting the error and success message state call the clearErrorMessage function.

    {state.errorMessage ? (
         showMessage({
            message: state.errorMessage,
            type: "danger",
            icon: "danger"
          }    
          ),  clearErrorMessage()
    
            ) : null}
    
    {{state.successMessage ? (
              showMessage({
              message: state.successMessage,
                type: "success",
                icon: "success"
              })
            ), clearErrorMessage() : null} }