I have a component that contains a form made with react-final-form; all the input fields work fine as in all my other forms, however, i have one custom input that i need for changing the state of the component, and then in the handleSubmit i would add that value to the form data. This is basically a custom input.
However, when i update the state of the component, it is resetting any user input in the other input fields whenever the state is updated. Why is it doing this, or what am i missing here so that changing the component state doesnt reset the values in the other inputs? I know i have seen it work before, but i can't tell the difference.
Here is a simplified version of my form
const MyForm = () => {
const [period,setPeriod] = useState(new Date())
const handleSubmit = (data) => {
console.log(data)
}
const handleSelectPeriod = (month) =>{
setPeriod(month)
}
const initialValues = {
period,
package_id:context.inheritData.package_id,
balance:0.00
}
return (
<div>
<Form
onSubmit={handleSubmit}
validate={values => validate(values, schema())}
initialValues={initialValues}
>
{({handleSubmit})=>(
<div>
<form onSubmit={handleSubmit}>
<div className={'form-group'}>
<label htmlFor="name">Name/label>
<InputField name={'name'} />
</div>
<div className={'form-group'}>
<label htmlFor="slug">Slug</label>
<InputField name={'slug'} />
</div>
<div className={'form-group'}>
<MonthYearContainer selectMonth={handleSelectPeriod}/>
</div>
<div className={'form-group'}>
<label htmlFor="balance">Balance Inicial</label>
<InputField name='balance' type={'number'} step={0.01}/>
</div>
<FormButton isLoading={loading} text={'Crear'} textLoading={'Creando Condominio'}/>
</form>
</div>
)}
</Form>
</div>
)
}
The expected behavior is to let the user change the component state without reseting whatever they have already input in the other fields.