javascript - React - Dynamic generation of forms - pages -

g'day. working on application has lot of big forms in requirements. 1 form has on 150 questions. figured neat way handle modern mobile design have multiple accordion sections inside form or present forms series of "wizard" pages can slid left , right. works when hard code jsx, rather repeat hard coding each , every form , form page decided try , build "form-page generator" takes json description this:

//-------------------------- export const assetform  = {                             "formname": "assetcreateedit",                             "format": "accordion",                             "pages":                                 [{                                     "pageid": "1",                                     "title": "asset summary - mandatories",                                     "fields":                                         [                                             {                                                    "name": "testname",                                                 "altname": "",                                                 "visible": true,                                                 "groupvisibility": "public",                                                 "type": "text",                                                 "component": "input",                                                 "label": "test smart input",                                                 "placeholder": "some default value",                                                 "required": "required",                                                 "validated": false,                                                 "data": []                                             },                                             {                                                    "name": "password",                                                 "altname": "",                                                 "visible": true,                                                 "groupvisibility": "public",                                                 "type": "password",                                                 "component": "input",                                                 "label": "test smart input",                                                 "placeholder": "password",                                                 "required": "required",                                                 "validated": false,                                                 "data": []                                             }                                         ]                                  },                                  {                                     "pageid": "2",                                     "title": "asset images - mandatories",                                     "fields":                                         [                                             {                                                    "name": "testname",                                                 "altname": "",                                                 "visible": true,                                                 "groupvisibility": "public",                                                 "type": "imagedrop",                                                 "component": "imagedropbox",                                                 "label": "test image dropbox",                                                 "placeholder": "",                                                 "required": "required",                                                 "validated": false,                                                 "optiminstic": "optomisticprevire",                                                 "data": []                                             }                                         ]                                  }                                 ]                             };    //-------------------------- export const assetworkflow  = [{                             "formname": "assetcreateedit",                             "format": "workflow",                             "pages":                                 [{                                     "pageid": "1",                                     "title": "asset summary - mandatories",                                     "fields":                                         [                                             {                                                    "name": "testname",                                                 "altname": "",                                                 "visible": true,                                                 "groupvisibility": "public",                                                 "type": "text",                                                 "component": "input",                                                 "label": "test smart input",                                                 "placeholder": "some default value",                                                 "required": "required",                                                 "valrequired": true,                                                 "validated": false,                                                 "data": []                                             },                                             {                                                    "name": "password",                                                 "altname": "",                                                 "visible": true,                                                 "groupvisibility": "public",                                                 "type": "password",                                                 "component": "input",                                                 "label": "test smart input",                                                 "placeholder": "password",                                                 "required": "required",                                                 "validated": false,                                                 "data": []                                             }                                         ]                                  },                                  {                                     "pageid": "2",                                     "title": "asset images - mandatories",                                     "fields":                                         [                                             {                                                    "name": "testname",                                                 "altname": "",                                                 "visible": true,                                                 "groupvisibility": "public",                                                 "type": "imagedrop",                                                 "component": "imagedropbox",                                                 "label": "test image dropbox",                                                 "placeholder": "",                                                 "required": "required",                                                 "validated": false,                                                 "optiminstic": "optomisticprevire",                                                 "data": []                                             }                                         ]                                  }                                 ]                             }                         ]; 

i guess want this:

//--------------- mybabel(opcode) {   let codeprops = [];                                                                         // stake basics                                                                          // , see if principle works                                                                         // must doable..... codeprops.push(<accordion uniqid={'addasset'} {...this.props} singleopen={true} >);                            codeprops.push(<accordionsection title="asset summary - mandatories" openbydefault={false} >);                                    codeprops.push(<h1>this must possible</h1>);                         codeprops.push(</accordionsection >); codeprops.push(<accordionsection title="asset summary - page 2" openbydefault={false} >);                                    codeprops.push(<h2>looks not.  sad.</h2>);                         codeprops.push(</accordionsection >); codeprops.push(</accordion >);  return codeprops;  }   //-------- render() {      const code = this.parse(this.props.form);                           // try after try not assemble, ignore     const jsx  = this.mybabel(code);                                    // jsx in here, not in way,                                                                         // shape or form.  way babel     console.log("-----------------------");                             // compiler works, took generation     console.log("code parse()");                                   // out of render, , building finished     console.log("-----------------------");                             // jsx 2 pass compiler.     console.log(code);     console.log(jsx);     return(             <div>                 <h2>smartform parser</h2>                 {jsx}             </div>     ); } 

does know if has been done before? can't seem find way of assembling code using jsx. if have abandon jsx , in javascript suppose can that. not sure how must do-able.

thoughts? cheers.

wiki