AtlasKit DropdownMenu: How to Manage State?

Hi, I am trying to develop a filtering table using the AtlasKit DropdownMenu component as the filter(s). The documentation is fairly good, but doesn’t really describe how to get the state of the DropdownMenu or handle when it changes. How can I update state when something has been selected? Just use an onClick handler on each of the DropdownItem components? It looks like the DropdownMenu used to utilize a method called “onItemActivated”, but this has been deprecated. The examples don’t give any indication on how we should be using this in conjunction with other components. The docs don’t seem to refer to any kind of state management either.

Thanks for your time.

Hey @GregTaylor, have a look at this example I made for you: https://gist.github.com/birox/0eb7332478dcb314508f6a6ba2c5b931

You’d use the onClick attribute to trigger a function and send the current selection object. That function will sit above the render declaration but within the React Class. This function when run will update the state selectedProject which was declared in the Class constructor. The selectedProject state variable also gets declared in the class render and then used to populate the table under the dropdown.

Hope this helps

2 Likes

Hi Biro,

Thanks for the help! This is the path I ended up going down; it’s good to hear that it was the right one!

-Greg

1 Like

Hello All,

I ran the above suggested code, but still had no luck getting a DropdownItem to fire off it’s own onClick handler? Here’s my current code that uses a functional component instead of a class component. I’m using this version of the DropdownMenu “@atlaskit/dropdown-menu”: “^8.1.4”,. Thanks for any insight!

-Tobi

import React from “react”;

import DropdownMenu, {
DropdownItemGroup,
DropdownItem
} from “@atlaskit/dropdown-menu”;

const onItemClick = () => {
console.log(“onItemClick”);
};

const ContainerNavigation = ({ data }) => {
return (
<DropdownMenu
trigger=“RULESETS”
triggerType=“button”
// onOpenChange={e => console.log(“dropdown opened”, e, e.currentTarget)}
shouldFitContainer={true}
triggerButtonProps={{
shouldFitContainer: true
}}
>

<DropdownItem key={id-0} onClick={onItemClick}>
{“Item 1”}



);
};
export default ContainerNavigation;

Or how do I grab what DropdownItem was clicked through the onOpenChange handler?