How to create React components from a JSON array?

Emma :

I want to create some form components using React. I know how to do that using pure JavaScript by createElement() and such methods, not sure how would I go about this in React.

My JSON array would look like:

[{
    "tag": "input",
    "name": "hiddenInput",
    "id": "hiddenInput",
    "type": "hidden",
    "label": "Hidden Label"
},{
    "tag": "input",
    "name": "textInput",
    "id": "textInput",
    "type": "text",
    "label": "Text Label"
}, {
    "tag": "input",
    "name": "passwordInput",
    "id": "passwordInput",
    "type": "password",
    "label": "Password Label"
}, {
    "tag": "input",
    "name": "emailInput",
    "id": "emailInput",
    "type": "email",
    "label": "Email Label"
}, {
    "tag": "input",
    "name": "phoneInput",
    "id": "phoneInput",
    "type": "text",
    "label": "Phone Label"
}, {
    "tag": "textarea",
    "name": "textarea",
    "id": "textarea",
    "label": "Textarea Label"
}, {
    "tag": "input",
    "name": "dateInput",
    "id": "dateInput",
    "type": "date",
    "label": "Date Label"
}, {
    "tag": "input",
    "name": "checkboxInput",
    "id": "checkboxInput",
    "type": "checkbox",
    "label": "Checkbox Label"
}, {
    "tag": "input",
    "name": "radioInput",
    "id": "radioInput",
    "type": "radio",
    "label": "Radio Label"
},{
    "tag": "button",
    "name": "buttonInput",
    "id": "buttonInput",
    "type": "button",
    "label": "Submit"
}];

and my desired output would be similar to:

  render() {
    return (
        <Form onSubmitStart={this.props.onSubmitStart}>
          <Input
            name="hiddenInput"
            id="hiddenInput"
            type="hidden"
            label="Hidden Label"
            value={this.state.hiddenInput}
          />

          <Input
            name="textInput"
            id="textInput"
            type="text"
            label="Text Label"
          />

          <Input
            name="passwordInput"
            id="passwordInput"
            type="password"
            label="Password Label"
          />

          <Input
            name="emailInput"
            id="emailInput"
            type="email"
            label="Email Label"
          />

          <PhoneInput
            name="phoneInput"
            id="phoneInput"
            type="text"
            country={"us"}
            enableAreaCodes={true}
            onlyCountries={["us"]}
            areaCodes={{ us: ["999","888"] }}
            inputProps={{
              name: "phone",
              country: "us",
              required: true,
              autoFocus: true
            }}
            value={this.state.phone}
            onChange={this.handlePhoneInput}
          />

        <textarea 
            name="dateInput"
            id="dateInput"
            rows={this.state.rows}
            cols={this.state.cols}
            >
        </textarea>

          <Input
            name="dateInput"
            id="dateInput"
            type="date"
            label="Date Label"
            onChange={this.handleDateInput}
          />

          <Checkbox
            name="checkboxInput"
            id="checkboxInput"
            type="checkbox"
            label="Checkbox Label"
            checked={this.state.checkbox}
          />

          <Radio
            name="radioInput"
            id="radioInput"
            type="radio"
            label="Radio Label"
            value={this.state.radio}
          />

          <Button 
            name="buttonInput"
            id="buttonInput"
            type="button"
            label="Button Label"
           > Submit </Button>
        </Form>
    );
  }

How would I do that?

Articles

JSON based dynamic forms with ReactJS

How To Create React.js Components Dynamically

(Thanks! I'm new to React framework.)

ray hatfield :

You can map over the elements and return the appropriate element for each:

const data = [{
    "tag": "input",
    "name": "hiddenInput",
    "id": "hiddenInput",
    "type": "hidden",
    "label": "Hidden Label"
},{
    "tag": "input",
    "name": "textInput",
    "id": "textInput",
    "type": "text",
    "label": "Text Label"
}, {
    "tag": "input",
    "name": "passwordInput",
    "id": "passwordInput",
    "type": "password",
    "label": "Password Label"
}, {
    "tag": "input",
    "name": "emailInput",
    "id": "emailInput",
    "type": "email",
    "label": "Email Label"
}, {
    "tag": "input",
    "name": "phoneInput",
    "id": "phoneInput",
    "type": "text",
    "label": "Phone Label"
}, {
    "tag": "textarea",
    "name": "textarea",
    "id": "textarea",
    "label": "Textarea Label"
}, {
    "tag": "input",
    "name": "dateInput",
    "id": "dateInput",
    "type": "date",
    "label": "Date Label"
}, {
    "tag": "input",
    "name": "checkboxInput",
    "id": "checkboxInput",
    "type": "checkbox",
    "label": "Checkbox Label"
}, {
    "tag": "input",
    "name": "radioInput",
    "id": "radioInput",
    "type": "radio",
    "label": "Radio Label"
},{
    "tag": "button",
    "name": "buttonInput",
    "id": "buttonInput",
    "type": "button",
    "label": "Submit"
}];

function Form ({data}) {
  return (
    <form>
      {data.map(({tag: Cmp, ...other}) => (
        <div key={other.id}>
          {other.label}: <Cmp {...other} />
        </div>
      ))}
    </form>
  );
}

ReactDOM.render(<Form data={data}/>, document.getElementById('demo'));

form > * {
  margin-bottom: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="demo"/>

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=301717&siteId=1