title: Creating Dynamic HTML using json data in reactjs
body: <p>I have the below json data and the react code to populate the data dynamically</p>
  
  <pre><code>var DATA = [{"processList":
  [{"processId":"1","processName":"Process1","htmlControlType":"radio","cssClassName":"radio"},
  {"processId":"2","processName":"Process2","htmlControlType":"radio","cssClassName":"radio"}],
  "processIndexList":
  [{"processId":"1","indexId":"1","indexDesc":"First Name","htmlControlType":"textbox","cssClassName":"form-control"},{"indexId":"2","indexDesc":"Last Name","htmlControlType":"textbox","cssClassName":"form-control"}]}];
  
  renderProcessList: function () {
  
      const data = DATA;
      return data[0].processList.map(group =&gt; {
          return &lt;div className={group.cssClassName}&gt;
                      &lt;label&gt;&lt;input type={group.htmlControlType} name="processOptions"/&gt;{group.processName}&lt;/label&gt;
                  &lt;/div&gt;
      });
  
  },
  
  renderProcessData: function () {
  
      const data = DATA;
      return data[0].processIndexList.map(group =&gt; {
          return &lt;div&gt;
                      &lt;label&gt;{group.indexDesc}&lt;/label&gt;
                    &lt;input type={group.htmlControlType} className={group.cssClassName} placeholder=""/&gt;
                    &lt;br/&gt;
          &lt;/div&gt;
      });
  
  },
  </code></pre>
  
  <p>As of now the form is getting displayed based on the json data, but i want to display the form based on the user selection in the process list
  ex: If the user select the Process1 radio the the First Name text box needs to be displayed below the radio and the user selects the process2 then Last Name text box needs to be displyed.</p>
  
  <p>Can anyone tell me how to do it in reactjs?</p>