Search code examples
reactjsreact-routerreact-dropdown-tree-select

How to Display different Components on selection options from Dropdown menu using React js

I am new to React js, Any help will be appreciated. What I want is to display different Components with different texts on the selection of different options in Dropdown Menu.

I am able to display value using {this.state.value} but this is not what I want. Here is the link to my existing code.

https://codesandbox.io/s/nifty-noyce-cj466

Solution

  • Hi and welcome to SO =)

    If you want to render different component relying on some condition then you can make something like this:

    {item === "first" && <Component1 />}
{item === "second" && <Component2 />}
{item === "third" && <Component3 />}

    You can find more information about conditional rendering here: https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator

    And here is a great article about reconciliation by Dan Abramov: https://overreacted.io/react-as-a-ui-runtime/#reconciliation