onClick Open all Dropdown Menu in table rows

Question

having n number of dropdown menus in React JS. When I am clicking nth menu item, I want to open the corresponding dropdown menu. But what I am getting now is, on clicking a menu item, all the dropdowns are getting opened. How this can be achieved?

Code:-

    const [isActive, SetisActive] = useState(false);                           
           {
              PlaylistData && PlaylistData.map((playdata) => {
                                return (
    
      <td >
    
                    <div className="Dropdown">
                <div className="Dropdown_btn" onClick={(e) => SetisActive(!isActive)}>{playdata.ChannelName}</div>
                    {isActive && (
                           Channelname.map((val, id) => {
                                                        {
               return (
                       <Fragment key={id}>
                       {removeRedundant([...val, playdata.ChannelName]).map((val1) => {
                           return (                                                                     
                                    <div className="dropdown_content">                                                                                
   <div className="dropdown_item"                                                                              
          onClick={(e) => { setPlayer(val1, playdata.idx, StoreIdx) }}>{val1}</div>
                                                                            </div>
                                                                        )
                                                                    })}
                                                                </Fragment>
                                                            )
                                                        }
                                                    })
                                                )}
                                            </div>
                                        </td>

Nick Vu · Accepted Answer · 2022-03-22 16:29:11Z

1

Instead of setting true/false values for your isActive, you should set a menu id that you want to open.

I modified your state name from isActive to activeMenu to align with the value assignment

const [activeMenu, setActiveMenu] = useState(); //as no opening menu initially

Modify your onClick (I don't know your playdata has unique id or not so I'm using ChannelName. If your data has id, you should use it instead)

onClick={(e) => setActiveMenu(playdata.ChannelName)}

The last part you need to do is just compare your state with the current menu item in the list

{activeMenu === playdata.ChannelName && (Channelname.map((val, id) => <elements></elements>)

edited Mar 22, 2022 at 16:29

answered Mar 22, 2022 at 15:11

Nick Vu

15.6k5 gold badges29 silver badges37 bronze badges

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

2 Comments

user18036812 Over a year ago

thanks, it works, please tell me it's working according to the table row id (open) but when I press it again 2 times it does not close in 1 row, but when I click the 2 rows then 1-row dropdown closed.

Nick Vu Over a year ago

If you want to do that behaviour, you need to modify onClick like this onClick={(e) => activeMenu === playdata.ChannelName ? setActiveMenu(null) : setActiveMenu(playdata.ChannelName)}. If your active menu is the same as the state, you set value null to collapse the menu @ANITAKUMARI

Collectives™ on Stack Overflow

onClick Open all Dropdown Menu in table rows

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related