I created the UI for generating the JSON expression using Material UI in ReactJS. I added nesting for the components that are inside a condition (like AND, OR, NOT etc.).
I can't provide the code as it's too lengthy for here (> 350 lines), but simply you can think of it as a recursive component that has checks for various conditions and renders the components required for that condition. The main thing to note here is that the property type is in every component. I want to leverage this fact and want to connect the children with there parent (both type fields).
Right now the UI looks something like this:
I want something like this:
How can I achieve this in ReactJS?
Please avoid outdated or any other more external libraries except Material UI (but if there's no other way, you can then suggest other as we want to know how can it be done) as there is some constraint for me to use external libraries?
Thank you in advance :-)