How Can I Make A Dynamic Tree Component?
Hi, I would like to generate a specific html structure for a binary tree given a JSON in input.
Hopefully I can explain the requirement well enough.
Each node of my tree is either an Expression or a Literal.
- Each Expression has a left and right child node and an operator
- Each Literal has a value
When I'm drawing my tree I want to do the following:
- If the node is an Expression check the two children then return
- If either of the children is a Literal then LEFT/RIGHT will just print the value.
- If either of the children is an Expression then LEFT/RIGHT will have a button
- Pressing the button should expand a div below the button containing the same structure but for the children expression.
Hopefully the attached image will help understanding.
Here is also a codepen when I tried doing an implementation: https://codepen.io/thevinter/pen/ByavwvM
However I am not able to expand the element properly on the edges. The idea is to make the container scrollable and expanding to the left/right when needed.
Could someone help?
Hopefully I can explain the requirement well enough.
Each node of my tree is either an Expression or a Literal.
- Each Expression has a left and right child node and an operator
- Each Literal has a value
When I'm drawing my tree I want to do the following:
- If the node is an Expression check the two children then return
<div>{LEFT} {operator} {RIGHT}</div>. - If either of the children is a Literal then LEFT/RIGHT will just print the value.
- If either of the children is an Expression then LEFT/RIGHT will have a button
- Pressing the button should expand a div below the button containing the same structure but for the children expression.
Hopefully the attached image will help understanding.
Here is also a codepen when I tried doing an implementation: https://codepen.io/thevinter/pen/ByavwvM
However I am not able to expand the element properly on the edges. The idea is to make the container scrollable and expanding to the left/right when needed.
Could someone help?
