score:3

Accepted answer

If you want to track form changes, you can handle it without settingState on every change, instead you can setState on Submit. If you want to pass formData programmatically you can use something as following:

this.state = {
  formData : {
    firstname:'Test first name'
  }
}

Following code works as you expect: (https://jsfiddle.net/tpjL2z06/)

const Form = JSONSchemaForm.default;
const schema = {
      title: "Test Form",
      type: "object",
      properties: {
        firstname: {
          type: "string",
          title: "firstname"
        },
      }
};

const uiSchema = {
  firstname : {
    "ui:widget": (props) => {
      return (
        <div>
          <input type="text"
            value={props.value}
            required={props.required}
            onChange={(event) => props.onChange(event.target.value)} />
        </div>
      );
    }
  }
};

class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      formData : {}
    }
  }

  render() {
    return (
      <div className="App">
        <div>
          <Form 
          schema={schema}
          uiSchema={uiSchema}
          formData={this.state.formData}
          onSubmit={(data)=>{ console.log(data)  }}
          />
        </div>
      </div>
    );
  }

}

ReactDOM.render(<App />, document.querySelector("#app"))

Related Query

More Query from same tag