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

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.