How do I extract the data from the JSON Form in React?

Hi,

I’ve seen a number of topics relating to getting the data from the JSON forms using redux, however all the examples seems to have been removed in the most recent commit.

I would like to know what is the recommended way to extract the data from the form using React.

I am aware of using the onChange handler to detect changes, however this will not work for me if I assign defaults to the form and the user doesn’t actually change those values. I still want to be able to capture those defaults.

Also note that I want to avoid providing the ‘initialData’ into the data prop using <JsonForms … /> and keeping tracking of it using onChange/useState. I want to just provide the defaults in the schema and extract the values when I’m ready to submit the form.

So an example of how to simply extract the form data would be great.

Thanks

1 Like

Hi @don,

the onChange method is exactly the way to extract the information out of JsonForms. This is standard practice in React because React lacks data binding, so this is the only way to actually perform it.

I am aware of using the onChange handler to detect changes, however this will not work for me if I assign defaults to the form and the user doesn’t actually change those values. I still want to be able to capture those defaults.

I don’t understand. When you pass in some default values then they will also be emitted again by JSON Forms.

Also note that I want to avoid providing the ‘initialData’ into the data prop using <JsonForms … /> and keeping tracking of it using onChange/useState. I want to just provide the defaults in the schema and extract the values when I’m ready to submit the form.

You can pass undefined for the data prop of JsonForm if you’d like to. Still you need to capture the current state of the formData via the onChange handler, there is no other way, e.g.

const [formData, setFormData] = useState();

<JsonForms
  data={undefined}
  schema={mySchema]
  onChange={({data}) => setFormData(data)}
/>

Then formData will always contain the current state of the form. To handle the defaults you can use AJV’s support for that. See here on how to set it up.

Hi Stefan

Thanks for your swift response.

In the end we decided to extract the defaults from the json schema and pass that down as the initial data and then keep track of them using onChange/state. This resolves this issue for us.

Thanks for your assistance.