I have a KendoReact form, it has its own initialValues, and a controlled input field:
<Form
ref={formRef as MutableRefObject<Form>}
onSubmit={handleOkButtonClick}
initialValues={initialData}
key={JSON.stringify(initialData)}
render={({ valid, visited }: FormRenderProps) => {
return (
<FormElement>
<StackLayout gap={1} orientation={'vertical'}>
<StackLayout gap={1} orientation={'vertical'}>
<FieldWrapper>
<Label>
'Name' *
</Label>
<Field
name={'Name'}
component={InputFormComponent}
autoFocus={true}
validator={ValidationWorker.isRequired}
maxLength={255}
value={nameOfProfile}
onChange={(event) => {
setNameOfProfile(event.target.value);
}}
/>
</FieldWrapper>
when I press on Copy button, new set of initial values need to be populated and inserted in the Name field, basically concatenating the string `- Copy` :
const handleCopyButtonClick = async () => { await uiHelper.blockUI(async () => { try { await createOssSoProfile(); setNameOfProfile(nameOfProfile + ` - Copy`); setInitialData({ Name: nameOfProfile + ` - Copy`, ...initialData }); } catch (e) { uiHelper.showError(e); } }); };
it only refreshed my form values once, so I can already see (name - Copy)
second time I press Copy I expect it to be (name - Copy - Copy)
but it is not reflecting in the form, only in the state
what am I missing?