I’m trying to create a dropdown for users, similar to the one on YouTube, where there is a main menu and submenus. I define it like this:

`const dropDownData = [
{
id: 1,
path: “/account”,
title: translation[lang].useDropDown[“main-menu”].account,
icon: ,
submenu: []
},
{
id: 2,
path: “/settings”,
title: translation[lang].useDropDown[“main-menu”].settings,
icon: ,
submenu: []
},
{
id: 3,
path: “”,
title: translation[lang].useDropDown[“main-menu”].lang,
action: userDropDownActions.language,
icon: ,
submenu: [
{
id: 1,
type: “en”,
title: “English”,
},
{
id: 2,
type: “ru”,
title: “Русский”,
},
]
},
{
id: 4,
path: “”,
title: translation[lang].useDropDown[“main-menu”].exit,
action: userDropDownActions.logout,
icon: ,
submenu: [],
}
]

export const UserDropDownList: React.FC = (): JSX.Element => {
const [submenuData, setSubmenuData] = useState<IUserDropDownSubmenu[]>([]);
const [isOpenSubmenu, setIsOpenSubmenu] = useState(false);

const handlerBack = (): void => {
    setIsOpenSubmenu(false);
};

return (
    <nav className={style.userDropDownNav}>
        {!isOpenSubmenu && (
            <ul className={style.userDropDownList}>
                {userDropDownData.map((item: IUserDropDownData) => (
                    <UserDropDownItem
                        key={item.id}
                        data={item}
                    />
                ))}
            </ul>
        )}

        {isOpenSubmenu && (
            <UserDropDownSubmenuList
                data={submenuData}
                handlerBack={handlerBack}
            />
        )}
    </nav>
);

};`

I don’t understand how to make it so that each item in the main menu or submenu has its own handlers, with different logic for execution in these handlers, while still being able to use hooks. For example, I use a hook to get translation properties when switching languages.

How can this be implemented? So that when the code in the component increases in case of adding a new item, I don’t have to define a whole component or even two components?

I tried using static methods without arrays, but it’s inconvenient to maintain the code since I have to create a submenu component for each item.