Form is not getting pre populated with the answer data.

[kart1ka]

The form is being generated by React Form Generator but the form is not getting populated by the answer data that I am fetching from my backend (firebase). I am passing the answer data to the answer_data prop of ReactFormGenerator. I also made sure that the answer data is also an array. Can you help me out please?

Here is the value of the answerData state - [ { "custom_name": "text_input_A0DFAA18-EDBA-4E93-8E2E-04D957D171F9", "name": "text_input_A0DFAA18-EDBA-4E93-8E2E-04D957D171F9", "value": "Kartika Goyal" } ]

Here is the value of the taskData state - [ { "canHaveAlternateForm": true, "canHaveAnswer": true, "canHaveDisplayHorizontal": true, "canHaveOptionCorrect": true, "canHaveOptionValue": true, "canHavePageBreakBefore": true, "canPopulateFromApi": true, "dirty": false, "element": "TextInput", "field_name": "text_input_A0DFAA18-EDBA-4E93-8E2E-04D957D171F9", "id": "0C990FD7-B414-458C-AAC8-A64B2DA3E495", "label": "Full Name ", "required": false, "text": "Text Input" } ]

Also as you can see in the Screenshots the value of the Submit and Back buttons are also not changing to Approve And Reject respectively as I have provided to ReactFormGenerator .

[Kiho]

@kart1ka Can you try change answer_data to object like below

{ "text_input_A0DFAA18-EDBA-4E93-8E2E-04D957D171F9": "Kartika Goyal" }

[kart1ka]

I tried doing that. It doesn't work. I did some debugging on my own and I think what's happening is that initially when the component renders the value of both answerData and taskData state is []. So, the <ReactFormGenerator /> component is rendered according to those values. But when the useEffect function runs and the values of answerData and taskData states get updated, the following code inside form.jsx file does not execute again for the new value of answerData state.

But the following code executes again for the new value of the taskData state.

Hence, form fields get rendered on the screen but their value is not rendered. I have tested this by putting the initial values of answerData state as [ { custom_name: "text_input_A0DFAA18-EDBA-4E93-8E2E-04D957D171F9", name: "text_input_A0DFAA18-EDBA-4E93-8E2E-04D957D171F9", value: "Kartika Goyal", }, ] and in that case the fields are getting populated with the answer data.

Can you please check why is this happening? Thanks.

[Kiho]

You can try to assign a key to rfb like this https://github.com/Kiho/react-form-builder/issues/122

[kart1ka]

As I understand passing a key is like passing a Unique identifier. I tried adding a key prop (and passed a Unique Identifier as the value of that prop) to the <ReactFormBuilder />. But that doesn't work either. It also leads to the Form Builder Page not working anymore. And how was passing a key prop to the ReactFormBuilder component supposed to resolve the issue faced in the ReactFormGenerator Component? Below is my code - Below are the errors that occur when I try to load Form Builder -

[Kiho]

There are 2 components in rfb, builder & generator, key should be applied to generator but it's not for builder. Also, use uuid as a key is worst choice, you should use key which is pointing unique & consistent identification of object.

[kart1ka]

I tried applying key to Form Generator as well. It didn't work. As for the UUID library, I googled and found uuid library to be the popular choice for generating unique ids. That's why I decided to use it. Can you please suggest some other library/way to generate Unique ids? Can you also please explain how can passing a unique key to the Form Generator solve the issue?

Following are the errors that I am getting after I apply key to Form Generator -

[Kiho]

https://stackoverflow.com/questions/52705335/will-using-uuid-to-as-list-keys-cause-unnecessary-re-renders-in-react You should change key when you need force rerender. I suggest you to move key generation out to parent component.

[kart1ka]

I am updating the key inside the useEffect after I fetch my answer details from the backend and update the answerData state. It's still not working. I am new to this, so if you could please write a small example code in the examples folder (about how to fetch answer data from backend using create-react-app and useEffect) as you have done for Next.JS.

I went through the stackoverflow link that you shared but it didn't help much.

Errors-

[Kiho]

Sorry, but I am too busy, don't have time to create sample in near future. You should generate new key when you getting new answer data.

[kart1ka]

I totally understand that you are busy. Just tell me what I'm doing wrong here. I am doing exactly as you said. I am changing the key after getting the new values of answer data. As you can see below in the screenshot, I am initially using the formId as the value of key prop. And then when I fetch my answer data from the backend, I am changing the value of the key prop to answerId. formId & answerId are generated by the firebase database.

I am not passing key prop to FormGenerator because it gives me a warning - FormRenderComponent: key is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop.

But, as you can see in the below image, it is giving me errors - Can not read properties of undefined (reading indexOf) - in the form.js component of the library.

[Kiho]

It maybe rfb bug, I have to check the logic but looks like you should supply task data before answer data.

[kart1ka]

I tried supplying task data before answer data. But it still does not work. It is still giving me same error - Can not read properties of undefined (reading indexOf) - in the form.js (line 101) component of the library. Can you please check and resolve this bug? Thank You.

[Kiho]

I have no idea where can be problem with your code & environment. If you really need help then you need create and replicate problem in github project.

[kart1ka]

The problem is solved. Thank You very much for your help.

[ingalesachin7]

@kart1ka Can you please provide the solution...