React: How to clear input value with useReducer() hook after form submit-CodePudding

I have an input where the user should have the last name, I'm using the useReducer() hook for validation if the input value includes a space (' ') and storing the value. Everything is working fine I'm also getting an invalid message correctly.

But after submitting the form I want to clear the input value, I've tried it in the useReducer action logic but it is not working.

Here is my code:-

    const [nameState, dispatchNameState] = useReducer(
                (state, action) => {
                    if (action.type === "USERNAME") {
                        return {
                            userName: action.nameValue,
                            isValid: action.nameValue.includes(" "),
                        };
                    }
                    if(action.type === 'USER_ON_CHANGE'){
                        return{
                            userName: state.userName,                   
                        }
                    }
                    if(action.type === 'CLEAR'){
                        return{
                            userName: '',
                        }
                    }
                },
                {
                    userName: "",
                    isValid: null,
                }
            );

//Form Submit Handler
const addUserHandler = (e) => {
        e.preventDefault();

        const userData = {
            userName: nameState.userName,
        };

        //Data transfer with props
        addedUser(userData);

        dispatchNameState({
            type: 'CLEAR',          
        })      
    };
    
    
    ///JSX
    
    <div className="form__group">
                        <input
                            type="text"
                            placeholder="Full Name"
                            value={nameState.nameValue}
                            onChange={(e) =>
                                dispatchNameState({
                                    type: "USER_ON_CHANGE",
                                    nameValue: e.target.value,
                                })
                            }
                            onBlur={(e) =>
                                dispatchNameState({
                                    type: "USERNAME",
                                    nameValue: e.target.value,
                                })
                            }
                        />
                        {nameState.isValid === false && (
                            <span className="invalid">*Enter your full name</span>
                        )}
                    </div>

CodePudding user response：

Just use nameState.nameValue = ""; and remove dispatchNameState for Clearing the input.

//Form Submit Handler
const addUserHandler = (e) => {
    e.preventDefault();    
    nameState.nameValue = "";    
};

Remove this code from useReducer

if(action.type === 'CLEAR'){
    return{
        userName: '',
    }
}