React Base Fiddle (JSX)
Starting point for creating JSFiddles with React. This uses React with Addons.
HTML
<script src="https://npmcdn.com/react-jsonschema-form/dist/react-jsonschema-form.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div class="container">
<div id="main">
</div>
</div>
Babel + JSX
const Form = JSONSchemaForm.default;
class MyComp extends React.Component {
constructor(props) {
super(props)
const schema = {
"title": "My Form",
"type": "object",
"properties": {
"check": {
"type": "boolean",
"title": "Show name?"
}
}
};
const formData = {};
this.state = {
schema,
formData
}
}
handleChange(data) {
const {
formData
} = data
let schema = {...this.state.schema}
if (formData.check) {
schema.properties = Object.assign(schema.properties, {
name: {
type: "string",
title: "Name"
}
})
} else {
schema.properties = Object.assign({},schema.properties)
delete formData.name
delete schema.properties.name
}
this.setState({
formData,
schema
})
}
render() {
return (
<Form
schema={this.state.schema}
formData = {this.state.formData}
onChange={this.handleChange.bind(this)}
/>)
}
}
React.render( < MyComp / > , document.getElementById("main"))