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>

CodePudding user response：

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