A. Docs are available here or you can use old branch on GitHub.



A. Right now, there are two standard ways how to update the second component:

  1. Set subscription
<FormRenderer
  schema={schema}
  FormTemplate={FormTemplate}
  componentMapper={componentMapper}
  onSubmit={console.log}
  subscription={{values: true}}
/>

All fields will be updated when values are changed. It will hurt the performance, but in small forms it should be ok.

  1. use formSpy
<FormSpy subscription={{values: true}}>
   {(formState) => <CustomComponent />}
</FormSpy>


A. Use useFormApi.change(name, value) function that allows you to set any value you need.



A.

You can divide the form by using default sub-form components.

{
  "component": "sub-form",
  "title": "Subform",
  "description": "This is a subform",
  "name": "subform",
  "fields": [
    {
      "name": "carrot",
      "label": "Carrot",
      "component": "text-field"
    }
  ]
}

Or you can easily implement your own component:

import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';


const Section = ({fields}) => {
   const { renderForm } = useFormApi();


   return (<div>
    {renderForm(fields)}
  </div>);
}


A. You have probably mixed different DDF modules. Please see optimization page.



A. To use conditions in FieldArray correctly, you have to use the right field index in when field. This can be achieved via using a function instead of a direct name. Functions in when field receive the current field, so you know the full name with the correct index.