Rendering React components from json data dynamically

Question

I have a json object like:

let data = {
            UI: {
                "baseType":"App",
                "children":[
                    {
                        "baseType":"TextField",
                        "props":{

                        }
                    }
                ]
            }
        };

I want to render it like:

<App>
 <TextField>
 </TextField>

So, I need to get dynamically rendered components from json object. For the same, I wrote a method:

getFromJson(obj) {
    // let Type = obj.baseType;

    let children = obj.children
        ? obj.children.map((obj) => {
                return this.getFromJson(obj,obj.baseType);
            })
        : '';
    // <></
    switch (obj.baseType) {
        case "App":

            return (
                <App key={key} {...obj.props}>
                    {children}
                </App>
            );
        case "TextField":
            //      {children}
            //  </TextField>);
            return (<TextField key={key} {...obj.props}>
                    {children}
                </TextField>
            );
        default:
            return <h1>Returning default case.</h1>;
    }

    // return <div>Hello</div>
}

I am calling the above method:

render() {

        let renderedUI = "";
        if (this.props.json.UI) {
            renderedUI = this.getFromJson(this.props.json.UI, "UI");
        }

        return renderedUI;
    }

The output is only App component, i.e., children are not getting rendered. The children although has value: {$$typeof: Symbol(react.element), key: "TextField", ref: null, props: {…}, type: ƒ, …}.

What am I doing wrong?

Edit: My whole component is:

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) => {
                    return this.getFromJson(obj,obj.baseType);
                })
            : '';
        // <></
        switch (obj.baseType) {
            case "App":

                return (
                    <App key={key} {...obj.props}>
                        {children}
                    </App>
                );
            case "TextField":
                //      {children}
                //  </TextField>);
                return (<TextField key={key} {...obj.props}>
                        {children}
                    </TextField>
                );
            default:
                return <h1>Returning default case.</h1>;
        }

        // return <div>Hello</div>
    }

    render() {

        let renderedUI = "";
        if (this.props.json.UI) {
            renderedUI = this.getFromJson(this.props.json.UI, "UI");
        }

        return renderedUI;
    }
}

TextField:

import React from "react";

export default class TextField extends React.Component {
    constructor() {
        super();
    }


    render() {
        console.log("returning from textfield");
        return <h1>Hi from textfield</h1>;
    }
}

App.js

import React from "react";
import axios from "axios";

import RenderFromJson from "./RenderFromJson";

export default class App extends React.Component {
    constructor() {
        super();
    }

    componentWillMount() {}

    render() {

        return <h2>In App</h2>;
    }
}

I suggest you to take a look at this: mozilla-services.github.io/react-jsonschema-form — Black.Jack
– Black.Jack, Commented Jan 23, 2018 at 13:29
Thanks. But, that is a huge library. I am looking for answers related to my scenario. — learner
– learner, Commented Jan 23, 2018 at 13:34
It's not that big. Consider effort to learn a well tested implementation with lots of example other than try to re-invent the wheel. — Black.Jack
– Black.Jack, Commented Jan 23, 2018 at 13:36

Ali Faris · Accepted Answer · 2018-01-23 15:19:36Z

4

finally after one hour I find the issue , your App component will get children array in props object and you must append the children inside your App component

export default class App extends React.Component {
    constructor() {
        super();
    }

    render() {
        return <div>
            <h1>In App</h1>
            {this.props.children /* this what solve the issue */} 
        </div>
    }
}

answered Jan 23, 2018 at 15:19

Ali Faris

18.7k12 gold badges51 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

André Gomes · Accepted Answer · 2018-01-23 13:37:15Z

1

GetFromJson = ({ children }) => {
   return children.map(elem => {
       const Tag = elem.baseType
       const props = { elem }
       return (
          <Tag> ...props </Tag>
       )
   })
}

And then in your component

render(){
   return <GetFromJson children={this.props.json.UI.children} />
}

I am just wondering, what do you have in props ? because maybe we need to change the ...props

answered Jan 23, 2018 at 13:37

André Gomes

1421 silver badge6 bronze badges

4 Comments

learner Over a year ago

I can have nested children too. Your case handles only on level of children.

André Gomes Over a year ago

just make a condition that will return another map of your data if you have nested children, for example you check if you have the key children in props and if you do instead of return ...props in you <Tag> you return a map of props.children

learner Over a year ago

This is what I have done in my original code, I think.

André Gomes Over a year ago

you only do a loop on the first children like i did, for now for testing purpose instead of returning <Tag> ...props </Tag>, do <Tag> !props.children ? ...props : null </Tag>

Talgat Saribayev · Accepted Answer · 2018-01-23 13:28:59Z

0

Probably you have issue with binding,try this

constructor(props) {
  super(props);

  this.getFromJson = this.getFromJson.bind(this);
}

answered Jan 23, 2018 at 13:28

Talgat Saribayev

1,93813 silver badges19 bronze badges

1 Comment

learner Over a year ago

Nope, same result.

Collectives™ on Stack Overflow

Rendering React components from json data dynamically

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related