title: How to create a Dynamic html form in reactjs using json data?
body: <p>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.</p>
  
  <pre><code>{
  "sampleData":
      [{"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"}
      ]
  }
  </code></pre>
  
  <p>and below is the react component for the form which I need to create dynamically, as of now i have 3 fields which are static and need to dynamically put from the above json.</p>
  
  <pre><code>var React = require('react');
  var ReactDOM = require('react-dom');
  
  var Menu = React.createClass({
  
  render: function () {
      return (
  
          &lt;div className="container"&gt;
              &lt;br/&gt;
              &lt;div className="panel panel-primary"&gt;
                  &lt;div className="panel-heading"&gt;Sample Dynamic Form using json data&lt;/div&gt;
                      &lt;div className="panel-body"&gt;
                              &lt;form className="form-horizontal"&gt;
                                  &lt;div className="form-group"&gt;
                                      &lt;label for="firstname" className="col-sm-2 control-label"&gt;First Name&lt;/label&gt;
                                          &lt;div className="col-sm-8"&gt;
                                              &lt;input type="text" className="form-control" id="firstname" placeholder=""/&gt;
                                          &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div className="form-group"&gt;
                                      &lt;label for="lastname" className="col-sm-2 control-label"&gt;Last Name&lt;/label&gt;
                                          &lt;div className="col-sm-8"&gt;
                                              &lt;input type="text" className="form-control" id="lastname" placeholder=""/&gt;
                                          &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div className="form-group"&gt;
                                      &lt;label for="address" className="col-sm-2 control-label"&gt;Address&lt;/label&gt;
                                          &lt;div className="col-sm-8"&gt;
                                              &lt;textarea type="text" className="form-control" id="address" placeholder=""/&gt;
                                          &lt;/div&gt;
                                  &lt;/div&gt;
  
                                  &lt;div className="col-md-10 text-right"&gt; 
                                      &lt;button type="button" className="btn btn-primary"&gt;Submit&lt;/button&gt;
                                  &lt;/div&gt;
  
                              &lt;/form&gt;
  
  
                      &lt;/div&gt;      
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  });
  module.exports = Menu
  </code></pre>
  
  <p>I'm new to react so,Can anyone help me how to do that in reactjs?</p>