Traverse through JSON and create React components - json

Question

How can I traverse through my data structure and create React components?
{
component: "View",
attributes: {
id: 'main'
},
child: [
{
component: "Text",
content: "Hello World!"
},
{
component: "Link",
attributes: {
href: "#"
},
child: [
{
component: "Text",
content: "Click me!"
}
]
}
]
}
Would output:
<View>
<Text>Hello World!</Text>
<Link>Click me!</Link>
</View>
How can I dynamically achieve this where it works regardless of the number of nested components?
I am able to make the top level component, but traversing through the child elements is where I hit a brick wall.

Answer 1

You can create a function that calls itself.
Sample
parseComponents = (data, key) => {
if (key === undefined || key === null) key = 0;
let Component = null;
switch(data.component) {
case 'View':
Component = View;
break;
case 'Text':
Component = Text;
break;
case 'Link':
Component = Link;
break;
default:
break;
}
if (Component === null) return Component;
return (
<Component key={`${data.component}-${index}`} {...data.attributes}>
{data.child.map((c, index) => this.parseComponents(c, index))}
</Component>
)
}

Answer 2

You can do like sample below:
Let's say your JSON is stored in const json.
getComponent = (json) => {
if (json.component) {
let children;
if (json.children) {
children = json.children.map(child => this.getComponentEquivalent(child));
}
let Container= this.getComponentEquivalent(json);
return (<Container>{children}</Container>); // as this will return a component you can directly put this in render.
}
};
then you may have a function that you could get equivalent component.
getComponentEquivalent = (object) => {
switch(object.component) {
case "Text":
return <Text>{object.content}</Text>
case "Link"":
return <Link>{object.content}</Link>
//......./
default:
//..../
}
};