How to create a Dynamic html form in reactjs using json data?

Question

Hi can anyone help me how to create a dynamic html form in reactjs using the json data form local. I have the below json format which contains the form details for 3 fields.

Answer 1

we have To File One data.json and Other is component.js file first Import The data from json file and then use That data to Create custom form

data.json  


[
   {
      UILabel : "Name",
      type : "text"(put any Type)
      attribute : {
             name : "name",
             minLength : 10,
             MaxLength : 20
             put all The Property Related to input type text
         }
   },

   {
        UILabel : "Gender",
        type : radio,
         attributes: {
                 Put all The attributes Related to gender
                 If you Put Value attribute and if you have type is date,time 
                 and  week then put default value in Proper Formate. or else it will 
                 through an error..
           }
   }
]

import React from 'react';
import fields from './data.json;

const customComponent = () => {
        return (
           fields.map(field => {
                <div className="input-box">
                     <input 
                        type={field.type}
                        name={field.atttibute.name}
                        className={field.attribute.className}
                        max={field.attribute.max
                        maxlength={field.attribute.maxlength}
                        min={field.attribute.min
                        minlength={field.attribute.minlength}
                        src={field.attribute.src}
                        ... Put all The jsx Props ..
                     />
                </div> 
            })
       )
}

[Here in Data file If i Put "type":"text" then it will consider
 only type text Related Props and will Ignore Other Porps like src, width and so on...]

[Here in Data file If i Put "type":"text" then it will consider only type text Related Props and will Ignore Other Porps like src, width and so on...]

Answer 2

Once you have the JSON data, you can map over it and create the layout dynamically, something like that:

// You can `require` a local file or `fetch` it from somewhere
// For the demo purpose, I just included it here.
const JSON = [  
    {  
        "indexId":"1",
        "abrvIndexName":"firstname",
        "indexDesc":"First Name",
        "htmlControlType":"textbox",
        "cssClassName":"form-control"
    },
    {  
        "indexId":"2",
        "abrvIndexName":"lastname",
        "indexDesc":"Last Name",
        "htmlControlType":"textbox",
        "cssClassName":"form-control"
    },
    {  
        "indexId":"3",
        "abrvIndexName":"address",
        "indexDesc":"Address",
        "htmlControlType":"textarea",
        "cssClassName":"form-control"
}];

var Menu = React.createClass({

    renderFormGroups: function() {
        // Assume your data is fetched/available
        const data = JSON;

        // Here we build the form's groups elements dynamically
        return data.map(group => {
            return <div className="form-group">

                <label for={group.abrvIndexName}
                       className={"col-sm-2 " + group.cssClassName}>
                    {group.indexDesc}
                </label>

                 <div className="col-sm-8">
                      <input type="text"
                             className="form-control"
                             id={group.abrvIndexName}
                             placeholder="" />
                  </div>

            </div>
        });
    },

    render: function () {
        return (
            <div className="container">
                <div className="panel panel-primary">
                    <div className="panel-heading">Sample Dynamic Form using json data</div>
                    <div className="panel-body">
                        <form className="form-horizontal">
                            {this.renderFormGroups()}
                        </form>
                    </div>      
                </div>
            </div>
        )
    }
});

ReactDOM.render(<Menu />, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>