Need Help with maintaining FormTemplate State

[ameyshr]

Hey Team,

We have a parent component that contains formRenderer. It also has some state values.

If we need to pass these state values to formTemplate then we have to use arrow function to pass it.
Now incase formTemplate also has state of its own, then when prop state from parent changes, it also re-initiates all states inside the form template.

For example in our code, You have a state in parent that is setName
and a state in formTemplate setCount and count.

on clicking change count we can increase count and it works but if we setName (i.e click change name) then our name gets changed but it also initialses our count state to 0.

How do we prevent this state from getting re-initiated?

Steps to reproduce:

1. Increase count first by button click
2. Now change a name by button click
3. value will reset to 0

https://codesandbox.io/s/data-driven-forms-example-forked-edzn46

import React, { useState } from 'react';
import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
import componentTypes from '@data-driven-forms/react-form-renderer/component-types';

const Button = ({ label, onClick }) => (
  <button onClick={onClick} >
    {label}
  </button>
);

const FormTemplate = (props) => {
  const { name } = props;
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>"name": {name}</p>
      <p>"count": {count}</p>
      <p>Press increase count first</p>
      <Button label="Increase Count" onClick={() => setCount((prevCount) => prevCount + 1)} />
    </div>
  );
};

const TextField = () => {
  return (
    <div></div>
  );
};

const componentMapper = {
  [componentTypes.TEXT_FIELD]: TextField,
  'custom-component-type': TextField,
};

const ComponentMapper = () => {
  const [values, setValues] = useState({});
  const [name, setName] = useState("Jackson");
  const schema = {
    fields: [
      {
        component: componentTypes.TEXT_FIELD,
        name: 'age',
        label: 'Your age',
        type: 'number',
      },
    ],
  };
  return (
    <div>
      <FormRenderer
        componentMapper={componentMapper}
        FormTemplate={() => <FormTemplate name={name} />}
        schema={schema}
        onSubmit={(values) => setValues(values)}
        onCancel={() => console.log('cancel action')}
      />
      <p>If you click change name count will be zero it should retain state</p>
      <Button label="Change Name" onClick={() => name == "Jackson" ? setName("Steve") : setName("Jackson")} />
    </div>
  );
};

ComponentMapper.displayName = 'Component mapper';

export default ComponentMapper;

Thank you for help

[rvsia]

Hello,

This happens because () => <FormTemplate name={name} /> is a component and on each re-render you re-initialize a new instance of it.

To solve this re-initialization, you can provide the component outside the form component and use context to share the value: https://codesandbox.io/s/data-driven-forms-example-forked-stdle1

[ameyshr]

Got it! Thank you for taking the time out to help me. Now I understand, and it's made all the difference!

Data Driven Forms is pretty awesome. Thanks once again!

[rvsia]

Glad to help and thank you for your kind words, let us know if there are any other issues! 😊

[ameyshr]

Absolutely. Thank you!

[Hyperkid123]

@ameyshr We are happy you like the library. BTW if for whatever reason you can't define the template outside of the render function, you can also use the template as a child node of the form renderer: https://www.data-driven-forms.org/components/children#heading-childrenrenderfunction#childrennodeminimalexample

[ameyshr]

Nice. This makes sense too.
Thanks for the alternative approach. I will explore this solution too and try it out.

Grateful for your help