2 Way Data Binding for KendoReactForm Fields

[Aydın]

I have a functional component which includes a FirmaListesi component to set seciliFirma state and a Form component which edits the selected seciliFirma object. FirmaListesi component includes only a KendoReact Combobox. When I select a Firma object from that component, I want Form component's Field to update its value. However it doesn't happen which occurs with an ordinary Input component.
const FirmaEkle = () => {
  const [firma, setFirma] = useState({ adi: "dswsd" } as Firma);

  const firmalar = useTypedSelector((state) => state.firma.firmalar);
  const seciliFirma = useTypedSelector((state) => state.firma.seciliFirma);

  const dispatch = useDispatch();

  const firmaEkle = () => {
    dispatch(updateFirma([...firmalar, { adi: "ewrer", id: 2 }]));
  };

  const handleSubmit = async () => {
    await FirmaKaydet(firma);
  };

  return (
    <>
      <FirmaListesi></FirmaListesi>
      <Form
        onSubmit={handleSubmit}
        initialValues={seciliFirma}
        render={(formRenderProps) => (
          <FormElement style={{ width: 400 }}>
            <fieldset className="k-form-fieldset">
              <legend className={"k-form-legend"}>Firma Bilgileri</legend>
              <Field id={"adi"} name={"adi"} label="Firma Adı" component={FormInput}></Field>
              <Button type="submit" disabled={!formRenderProps.allowSubmit}>
                {seciliFirma ? "Güncelle" : "Kaydet"}
              </Button>
            </fieldset>
          </FormElement>
        )}
      />

      <Button onClick={() => alert(seciliFirma.adi)}>Deneme1</Button>
    </>
  );
};

[Aydın]

By setting key prop of Form component, it works as expected. 

Thanks

[Stefan]

Hello, Aydın,

Yes, this is the recommended way to achieve this.

We even have a demo for this exact use case on a pull request.

This is how it looks:

https://stackblitz.com/edit/react-hzn2d9?file=app/main.jsx

Regards,
Stefan
Progress Telerik