Hi Team,
I’m trying to create a dashboard gadget using Forge UI Kit to display a list of users in a group.
To select a group(s) within in DashboardGadgetEdit, I use Select component that can only be used inside a Form or a MacroConfig component. Here is my error:
Please advise.
Hey Egor,
Judging from the error message it looks like you’re nesting one Form component within another Form component? Is that the case? Do you think you could share the code that you’ve written so that we can review?
Regards,
Dave
Hi Dave,
Please see my code below:
My index.jsx
import { render } from "@forge/ui";
import { View } from "./components/view";
import { Edit } from "./components/edit";
export const runView = render(<View />);
export const runEdit = render(<Edit />);
My Edit.jsx
import { DashboardGadgetEdit, useState, Fragment } from "@forge/ui";
import { getGroups } from "../utils/utils";
//Display list of users from selected groups
import { UsersTable } from "./UsersTable";
//Modal window to select a group(s)
import { GroupsDialog } from "./GroupsDialog";
import { users } from "../constants/mock";
//Main return of data to View table
export const Edit = () => {
const onSubmit = async (values) => {
return { ...values, refresh: 25 };
};
const [isOpenModal, setOpenModal] = useState(false);
const [groups, setGroups] = useState(getGroups());
return (
<DashboardGadgetEdit onSubmit={onSubmit}>
<Fragment>
<UsersTable users={users} setOpenModal={setOpenModal} />
<GroupsDialog
groups={groups}
setGroups={setGroups}
isOpenModal={isOpenModal}
setOpenModal={setOpenModal}
/>
</Fragment>
</DashboardGadgetEdit>
);
};
My GroupsDialog.jsx
import ForgeUI, {
useState,
Select,
Option,
Fragment,
FormCondition,
Form,
ModalDialog,
} from "@forge/ui";
//Modal window to select user groups
export const GroupsDialog = ({
groups,
setGroups,
isOpenModal,
setOpenModal,
}) => {
const onSubmit = async (formData) => {
setGroups([...groups, formData]);
setOpenModal(false);
};
const options = groups.map((group) => (
<Option label={group.name} value={group.groupId} />
));
return (
<Fragment>
{isOpenModal && (
<ModalDialog header="Add Group" onClose={() => setOpenModal(false)}>
<Form onSubmit={onSubmit}>
<Select
isRequired={true}
label="Select a group"
name="groups"
isMulti="true"
>
{options}
</Select>
</Form>
</ModalDialog>
)}
</Fragment>
);
};
Hi @EgorTiunov, the DashboardGadgetEdit component itself contains a Form component, and so your Form component is techncially nested within another Form. You should remove your Form and instead put your onSubmit prop on DashboardGadgetEdit.
2 Likes