DEV Community

Discussion on: How to render different components based on the selected option?

Collapse
 
thermatix profile image
Martin Becker

My guess would be to have a generic 'chooser' like proxy component that then renders the actual component based on an input property which would be the result of the selection.

Collapse
 
iaziz786 profile image
Mohammad Aziz

What according to you would be the body of the chooser component? How should I approach it?

Collapse
 
thermatix profile image
Martin Becker • Edited

I admit I was a bit quick on the draw and didn't read the OP as properly as I should; I admit to having limited knowledge on react and was trying to provide a generic answer (which turned out to be completely unhelpful).

That said, I'm going to guess that you are building a question/ answer system or something like it?

If so, you could build it with the data stored as a tree with the root as the first question and each question representing a node on the tree and each answer/question combo a sub-node, attach to each node details about the question including the user's response, then just render only the nodes that have been selected.
To render the questions you could recursively walk the tree and render only the nodes that have been selected as an answer when you can't go any further, you've reached the current un-answered question.

It would be worth storing the current location in the tree, perhaps by storing a list of the id's of the nodes (after having given each node an id of course) and then to get back to the current question, you could loop through the list and tree using the current list item to select the next node.

To be honest, I can only give a generic answer, I do hope it's if of help but I think maybe in hindsight I shouldn't have waded in with as limited knowledge on react as I have.