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?