reactjs clean inputs after form is submitted - reactjs

Question

currently i have one problem in my forms i cant clear inputs after form is submitted..
I have two files for input and form:
form-hook.js
import { useCallback, useReducer } from 'react';
const formReducer = (state, action) => {
switch (action.type) {
case 'INPUT_CHANGE':
let formIsValid = true;
for (const inputId in state.inputs) {
if (!state.inputs[inputId]) {
continue;
}
if (inputId === action.inputId) {
formIsValid = formIsValid && action.isValid;
} else {
formIsValid = formIsValid && state.inputs[inputId].isValid;
}
}
return {
...state,
inputs: {
...state.inputs,
[action.inputId]: { value: action.value, isValid: action.isValid }
},
isValid: formIsValid
};
case 'SET_DATA':
return {
inputs: action.inputs,
isValid: action.formIsValid
};
default:
return state;
}
};
export const useForm = (initialInputs, initialFormValidity) => {
const [formState, dispatch] = useReducer(formReducer, {
inputs: initialInputs,
isValid: initialFormValidity
});
const inputHandler = useCallback((id, value, isValid) => {
dispatch({
type: 'INPUT_CHANGE',
value: value,
isValid: isValid,
inputId: id
});
}, []);
const setFormData = useCallback((inputData, formValidity) => {
dispatch({
type: 'SET_DATA',
inputs: inputData,
formIsValid: formValidity
});
}, []);
return [formState, inputHandler, setFormData];
};
And here i got one Input.js file:
import React, { useReducer, useEffect } from 'react';
import { validate } from '../../util/validators';
const inputReducer = (state, action) => {
switch (action.type) {
case 'CHANGE':
return {
...state,
value: action.val,
isValid: validate(action.val, action.validators)
};
case 'TOUCH': {
return {
...state,
isTouched: true
};
}
default:
return state;
}
};
const Input = props => {
const [inputState, dispatch] = useReducer(inputReducer, {
value: props.initialValue || '',
isTouched: false,
isValid: props.initialValid || false
});
const { id, onInput, clearInputs } = props;
const { value, isValid } = inputState;
useEffect(() => {
onInput(id, value, isValid);
}, [id, value, isValid, onInput]);
const changeHandler = event => {
dispatch({
type: 'CHANGE',
val: event.target.value,
validators: props.validators
});
};
const touchHandler = () => {
dispatch({
type: 'TOUCH'
});
};
const element =
props.element === 'input' ? (
<input
id={props.id}
type={props.type}
placeholder={props.placeholder}
onChange={changeHandler}
onBlur={touchHandler}
value={inputState.value}
maxLength={props.maxlength}
/>
) : (
<textarea
id={props.id}
rows={props.rows || 3}
onChange={changeHandler}
onBlur={touchHandler}
value={inputState.value}
/>
);
return (
<div
className={`form-control ${!inputState.isValid &&
inputState.isTouched &&
'form-control--invalid'}`}
>
<label htmlFor={props.id}>{props.label}</label>
{element}
{!inputState.isValid && inputState.isTouched && <p>{props.errorText}</p>}
</div>
);
};
export default Input;
My problem here is that i can't access this inputState, it looks like the value is stored in it...
And this is just an example how is this used in my components and this is functional programing in reactjs..
import React, { useState, useContext } from 'react';
import { Text, LanguageContext } from '../../lang/containers/Language';
import Input from '../../shared/components/FormElements/Input';
import Button from '../../shared/components/FormElements/Button';
import ErrorModal from '../../shared/components/UIElements/ErrorModal';
import {
VALIDATOR_EMAIL
} from '../../shared/util/validators';
import { useForm } from '../../shared/hooks/form-hook';
import { useHttpClient } from '../../shared/hooks/http-hook';
const NewSletter = () => {
const { dictionary } = useContext(LanguageContext);
const { isLoading, error, sendRequest, clearError } = useHttpClient();
const [joined, setJoined] = useState(false);
const [formState, inputHandler] = useForm(
{
email: {
value: '',
isValid: false
}
},
false
);
const newsletterSubmit = async event => {
event.preventDefault();
try {
const responseData = await sendRequest(
'http://localhost:5000/api/users/newsletter',
'POST',
JSON.stringify({
email: formState.inputs.email.value,
}),
{
'Content-Type': 'application/json'
}
);
if(responseData.message == 'subscribed'){
setJoined(true);
//here i need to clean all inputs in this form
}
} catch (err) {
console.log(err)
}
};
return (
<>
<ErrorModal error={error ? <Text tid={error}/> : null} onClear={clearError} />
<div className="newsletter-bg">
<div className="container">
<div className="newsletter-bg-title"><Text tid="newsletter"/></div>
<div className="space10px"></div>
<form className="newsletter-form" onSubmit={newsletterSubmit}>
<Input
element="input"
id="email"
type="email"
label={<Text tid="auth_lang4" />}
validators={[VALIDATOR_EMAIL()]}
errorText={<Text tid="auth_lang5" />}
onInput={inputHandler}
/>
<Button type="submit" disabled={!formState.isValid}>
<Text tid="add"/>
</Button>
{joined === true ? <div className="biltenmsg"> <span style={{color: 'green'}}><Text tid="joinedsletter"/></span> </div> : null}
</form>
</div>
</div>
</>
);
};
export default NewSletter;
I also tried serveral examples from here like reset() and others things, also tried to change useForm things but i couldnt delete value because it read value from input.js file in inputState how i figured... I also tryed with setformdata and some others examples but i didnt solve this problem.. Best regards.

Answer 1

You can only update inputState by dispatch only
const inputReducer = (state, action) => {
switch (action.type) {
case 'CHANGE':
return {
...state,
value: action.val,
isValid: validate(action.val, action.validators)
};
case 'TOUCH': {
return {
...state,
isTouched: true
};
}
case 'RESET': {
return {
value: action.value,
isTouched: action.isTouched,
isValid: action.isValid
};
}
default:
return state;
}
};
then
dispatch({
type: 'RESET',
value: props.initialValue || '',
isTouched: false,
isValid: props.initialValid || false
});

Answer 2

I don't see much problem in your formReducer which got used by useForm and inside you defined a inputHandler that is must-have to get any input work. However your Input is overly complicated IMHO.
Attached is an example useForm
const useForm = (props = {}) => {
const [state, dispatch] = useReducer(reducer, initialState(props))
const change = useCallback((payload) => {
dispatch({ type: 'change', payload })
}, [])
const validate = useCallback((payload) => {
if (!state.validate) return
dispatch({ type: 'validate', payload: payload || state.values })
}, [state])
const submit = useCallback((payload) => {
dispatch({ type: 'submit', payload })
}, [])
const onChange = useCallback(e => {
const target = e.target
const payload = { [target.name]: target.value }
change(payload)
validate(payload)
}, [change, validate])
const onSubmit = useCallback(e => {
if (e) e.preventDefault()
submit(state.values)
}, [submit, state.values])
/**
* #typedef {object} useFormObject
* #property {string} name Form name
* #property {object} values Form values
* #property {func} change Form change function
* #property {object} handlers Form events
* #property {func} handlers.onChange Event upon input change
* #property {func} handlers.onSubmit Event upon form submit
* #property {func} validate Form validate function
* #property {object} errors Form errors
* #property {bool} error Form in error
*/
return {
name: state.name,
values: state.values,
change,
handlers: {
onChange,
onSubmit
},
validate,
errors: state.errors,
error: hasError(state.errors),
}
}
export default useForm
and the usage is
const { values, handlers, errors } = useForm({ initialValues })
and then every input widget is about
<input value={values.abc} onChange={handlers.onChange} />
You can see there's no need for another level of reducer inside input, because both value and onChange are almost "read-only" properties from input point of view.
For completeness, reducer is attached here.
import hasError from './hasError'
const defaultState = {
values: {},
errors: {},
watchers: {}
}
const reducer = (state = defaultState, action) => {
let payload = {}
if (action && action.payload) {
payload = action.payload
}
const watchers = state.watchers || {}
const watch = state.watch || (() => { })
const validate = state.validate || (() => { })
const { onSubmitted } = watchers
let errors
switch (action.type) {
case 'change':
watch(action.type, payload)
return {
...state,
values: {
...state.values,
...payload
}
}
case 'validate':
errors = validate(payload, action.type)
watch(action.type, errors)
return {
...state,
errors: {
...state.errors,
...errors
}
}
case 'submit':
errors = validate(payload, action.type)
watch('validation', errors)
if (hasError(errors)) {
return {
...state,
errors
}
}
if (onSubmitted) {
onSubmitted(state.values)
}
return state
default:
return state
}
}
export default reducer