I want to create a page where I have more than 30 different select options. Whenever I select one of the options based on the currently selected option, a different set of React components renders below.
As I have said, there are more than 30 different select options. Well, it is not necessary that for each option the combination of components will be different. There can be a one-to-many relationship between a component and the option under which the component is rendered.
There are many ways to do this, but I wanted to gather some ideas before I implement one. What approach should I take to create this kind of a page?
Top comments (4)
If you use a standard select be aware that the 'Change' event will occur each time a user uses the arrow key on the closed select tag.
That being said, I have an application that shows the choices as a scroll-able table the user selects the item from that and the app renders a component with that specific data (i.e. it routes to that page in the SPA). The scroll-able table is easy to implement and allows the user to select the item they want without the extra change event calls caused by the standard select item. IMO
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.
What according to you would be the body of the chooser component? How should I approach it?
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.