i was wondering if anyone could advise me on the best way to get data passed through a Link component? I have identified the parent component that i wish to lift up the state to, in this case its the DropDownModal component. From there the data has to pass down through two components on each branch. My problem is one branch is AvatarBlock, which is a component, thats fine, the problem is my second branch which is a link that takes me to the account page. Because it isnt a component im not sure how to navigate through it with prop drilling.
export function DropDownModal() {
// ------------ i plan on lifting up the state here.
return (
<DropdownMenu>
<DropdownMenuTrigger>
<AvatarBlock /> // ----------------------- 1st branch
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>
<Link href="/Account">Profile Page</Link> // ------------------ 2nd branch
</DropdownMenuItem>
<DropdownMenuItem>Log out</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}
I have tried (naively) to pass through the data as props in the normal way but the state variable is showing as null once i use it in the component where i want to access it. Any help on this would be appreciated.
lee williams is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.