CODEWITHSUNDEEP
reactjs
user18036812
user18036812

Reputation:

onClick Open all Dropdown Menu in table rows

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>

Upvotes: 1

Views: 955

Answers (1)

Nick Vu
Nick Vu

Reputation: 15520

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>)

Upvotes: 1

Related Questions