reactjsreact-functional-componentreact-jsonschema-forms

Get updated field values from react-jsonschema-form


I am using react-jsonschema-form to dynamically generate form fields. I am using this to generate only few additional fields in a form. Therefore I'm not using submit function in react-jsonschema-form. Instead I submit generated field values also with my form.

I am using this state hook to store the values of updated properites

const [additionalData, setAdditionalData] = useState("")

What I want to do is update value of additionalData from onChange in react-jsonschema-form.

function getTemplateFields(data: string) {
  const json = JSON.parse(data)


  const log = (type: string) => console.log.bind(console, type);

  return <div>
      {json &&
          <Form schema={json}
                onChange={e => {                    
                    setAdditionalData(e.schema.properties) // something like this

                }}
                children={true} // hide submit button
                onError={log("errors")}/>
      }
  </div>

}

But I cannot get the update field values from event. Can someone help me with this.


Solution

  • According to documentation the first argument of onChange function is a result object having a formData attribute. So to get access to event you should do something like:

    onChange={({ formData }, e) => {                    
      setAdditionalData(e.schema.properties);
    }}