title: Rendering React components from json data dynamically
body: <p>I have a json object like:</p>
  
  <pre><code>let data = {
              UI: {
                  "baseType":"App",
                  "children":[
                      {
                          "baseType":"TextField",
                          "props":{
  
                          }
                      }
                  ]
              }
          };
  </code></pre>
  
  <p>I want to render it like:</p>
  
  <pre><code>&lt;App&gt;
   &lt;TextField&gt;
   &lt;/TextField&gt;
  </code></pre>
  
  <p></p>
  
  <p>So, I need to get dynamically rendered components from json object. For the same, I wrote a method:</p>
  
  <pre><code>getFromJson(obj) {
      // let Type = obj.baseType;
  
      let children = obj.children
          ? obj.children.map((obj) =&gt; {
                  return this.getFromJson(obj,obj.baseType);
              })
          : '';
      // &lt;&gt;&lt;/
      switch (obj.baseType) {
          case "App":
  
              return (
                  &lt;App key={key} {...obj.props}&gt;
                      {children}
                  &lt;/App&gt;
              );
          case "TextField":
              //      {children}
              //  &lt;/TextField&gt;);
              return (&lt;TextField key={key} {...obj.props}&gt;
                      {children}
                  &lt;/TextField&gt;
              );
          default:
              return &lt;h1&gt;Returning default case.&lt;/h1&gt;;
      }
  
      // return &lt;div&gt;Hello&lt;/div&gt;
  }
  </code></pre>
  
  <p>I am calling the above method:</p>
  
  <pre><code>render() {
  
          let renderedUI = "";
          if (this.props.json.UI) {
              renderedUI = this.getFromJson(this.props.json.UI, "UI");
          }
  
          return renderedUI;
      }
  </code></pre>
  
  <p>The output is only App component, i.e., children are not getting rendered. The children although has value: <code>{$$typeof: Symbol(react.element), key: "TextField", ref: null, props: {…}, type: ƒ, …}</code>.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>Edit: My whole component is:</p>
  
  <pre><code>import React from "react";
  import TextField from "./TextField";
  import App from "./App";
  
  export default class RenderFromJson extends React.Component {
      constructor() {
          super();
          this.getFromJson = this.getFromJson.bind(this);
      }
  
      componentWillMount() {}
  
      getFromJson(obj,key) {
          // let Type = obj.baseType;
  
          let children = obj.children
              ? obj.children.map((obj) =&gt; {
                      return this.getFromJson(obj,obj.baseType);
                  })
              : '';
          // &lt;&gt;&lt;/
          switch (obj.baseType) {
              case "App":
  
                  return (
                      &lt;App key={key} {...obj.props}&gt;
                          {children}
                      &lt;/App&gt;
                  );
              case "TextField":
                  //      {children}
                  //  &lt;/TextField&gt;);
                  return (&lt;TextField key={key} {...obj.props}&gt;
                          {children}
                      &lt;/TextField&gt;
                  );
              default:
                  return &lt;h1&gt;Returning default case.&lt;/h1&gt;;
          }
  
          // return &lt;div&gt;Hello&lt;/div&gt;
      }
  
      render() {
  
          let renderedUI = "";
          if (this.props.json.UI) {
              renderedUI = this.getFromJson(this.props.json.UI, "UI");
          }
  
          return renderedUI;
      }
  }
  </code></pre>
  
  <p>TextField:</p>
  
  <pre><code>import React from "react";
  
  export default class TextField extends React.Component {
      constructor() {
          super();
      }
  
  
      render() {
          console.log("returning from textfield");
          return &lt;h1&gt;Hi from textfield&lt;/h1&gt;;
      }
  }
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>import React from "react";
  import axios from "axios";
  
  import RenderFromJson from "./RenderFromJson";
  
  export default class App extends React.Component {
      constructor() {
          super();
      }
  
      componentWillMount() {}
  
      render() {
  
          return &lt;h2&gt;In App&lt;/h2&gt;;
      }
  }
  </code></pre>