Dynamically changing wrapper tag in React

Question

I want to change my wrapper tag around content. Currently I am doing it like this:

{!filter && <Styled.DropdownMenu>
    {Options}
</Styled.DropdownMenu>}
{filter && <Dropdown.Menu as={CustomMenu}>
   {Options}
</Dropdown.Menu>}

Which works. But since the content Options is always going to be same. I was wondering if there is a way to dynamically change just the wrapper tag in same line without repeating the code for {Options}.

Nooruddin Lakhani · Accepted Answer · 2020-11-20 07:07:12Z

1

Try this way

const TAG = !filter ? Styled.DropdownMenu : Dropdown.Menu;

const customMenuData = !filter ? {} : {CustomMenu};

<TAG as={customMenuData}>{Options}</TAG>

edited Nov 20, 2020 at 7:07

answered Nov 20, 2020 at 6:45

Nooruddin Lakhani

6,8413 gold badges22 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kiran Dash Over a year ago

How to pass as={CustomMenu} for Dropdown.Menu then?

Someone Special · Accepted Answer · 2020-11-20 06:43:02Z

0

You can use the following instead of multiple !filter checks.

filter ? <Styled.DropdownMenu>{Options}</Styled.DropdownMenu> 
: (<Dropdown.Menu as={CustomMenu}>
       {Options}
    </Dropdown.Menu>)

Or you can create separate components and use as follows

filter ? <StyledDropDownComponent options={Options} /> : <DropDownComponent options={Options} />

Which makes your code cleaner.

answered Nov 20, 2020 at 6:43

Someone Special

13.7k8 gold badges54 silver badges80 bronze badges

Collectives™ on Stack Overflow

Dynamically changing wrapper tag in React

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related