React JSX - Conditional Rendering Issue

Question

0

I have state controlled by a dropdown menu, which when you select will setState. Simple.

What I want to do is when there is nothing selected, have a generic 'Select below', but if something is selected, I wanted to set that as the option selected.

For example: if(!selectedStyle THEN 'Choose Below' ELSE selectedStyle)

selectedStyle holds the state selected, how would I write out this component?

{selectedStyle>0: selectedSyle || Choose}

But also this is my component, does anyone see the correct way to write it out?

<Dropdown>
                        <Dropdown_Button
                        onClick={e => 
                            setisActive(!isActive)}
                        >
                            {selectedStyle>0: selectedSyle || Choose}
                            
                            <span>
                                <KeyboardArrowDownIcon/>
                            </span>
                        </Dropdown_Button>
                        {isActive &&
                        <Dropdown_Content>

                            {styleSelection.map((option) => (
                                <Dropdown_Item onClick={(e) => {
                                    setselectedStyle(option)
                                    setisActive(false)
                                }}
                                >
                                    {option}
                                </Dropdown_Item>
                            ))}
                        </Dropdown_Content>
                        }
                
                    </Dropdown>

Perhaps you're looking for {selectedStyle > 0 ? selectedStyle : "Choose"}? — Nicholas Tower
– Nicholas Tower, Commented Sep 10, 2022 at 1:21

Anastasiia Solop · Accepted Answer · 2022-09-10 01:30:04Z

1

You can simplify it to just {selectedStyle || "Choose style"}

answered Sep 10, 2022 at 1:30

Anastasiia Solop

1,54314 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

React JSX - Conditional Rendering Issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related