0
208
ViewsHow to lift up the state from the child component?
I am looking for some guidance in this react code I have a ActionsDropDownWidget with a bunch of dropdown items being passed as children to it.
<DropdownMenu
testId="actions-menu"
trigger={({ triggerRef, ...props }) => (
<Button
appearance="subtle"
{...props}
iconBefore={<VerticalOverflowIcon label="more" />}
ref={triggerRef}
/>
)}
>
{children}
</DropdownMenu>
Here is how I pass the children to ActionsDropDownWidget
<ActionsDropDownWidget attachment={attachment} onDeleteAttachment={onDeleteAttachment}>
<CustomerDropdownActions
attachment={attachment}
onAttachmentDownload={onAttachmentDownload}
onCopyAttachmentName={onCopyAttachmentName}
onDeleteAttachment={onDeleteAttachment}
/>
</ActionsDropDownWidget>
Here what is being rendered from CustomerDropdownActions
<DropdownItemGroup hasSeparator testId="negative-actions">
<DropdownItem
onClick={(_) => setOpenDialog(true)}
elemBefore={
<TrashIcon label={t("confirmation_modal.negative_action.text")} testId={"trash-button"} />
}
description={t("action_dropdown.delete_attachment.description")}
>
{t("action_dropdown.delete_attachment.text")}
</DropdownItem>
</DropdownItemGroup>
{showConfirmationModal}
Now when the dropdown is rendered and so are the children in it.
When I click on the child above, its onClick tries to update the state. However, that state isn’t reflected and so the Dialog does not open.
Where am I going wrong in this?
1 answers
Answer question0
I guess the prop drilling took the best out of me.
The first mistake was in
ActionsDropDownWidgetthat it wasn't a react functional component so I couldn't manage the state in there.Fix?
So what I did was to wrap the
ActionsDropDownWidgetin a wrapper functional component.The second mistake was I missed passing the event callback back to the parent to open the dialog box.
<DropdownItem onClick={(_) => setOpenDialog(true)} << I should've called the parent callback here.Fix?
In the child components
CustomerActionsandAgentActionsI tell the parent via a callback function to show the modal. Since the parentActionsDropdDownWidgetis now a functional component, I managed my state there. So when child components send a event via the callback, I update a variable calledopenDialogand it renders the modal.
Sketch
