CODEWITHSUNDEEP
javascriptcssreactjshtmluser-interface
Hightower
Hightower

Reputation: 1008

React DIV dynamic layout algorithm to create a box-in-box view

I am trying to represent the following onto a web page. - that is a data model representation illustrating objects, attributes and child objects in a parent child hierarchy.

enter image description here

I was thinking to create a generic React component that would be able to store a single data object, but then also have that same object accept child instances in a sort of dynamic mechanism.

The result would be a nested-box type view, which would show all elements and nested children.

at the end, The "model" would look something like this.

enter image description here

I dont even know where to start to build something like this. I am looking for some ideas to build a UI like this... the intention at a later stage would be to enable something like React-draggable to allow dragging of elements.

Upvotes: 0

Views: 298

Answers (1)

MattYao
MattYao

Reputation: 2555

For infinite tree structure rendering purposes, you might need to look at recursion usage in React. I found some resources for you:

Basically, you need to create a function in the class which returns an instance of your class.

Upvotes: 1

Related Questions