Add fields in Edit view
@kapa.ai , i want to add keyMembers field in this code and data format for keyMembers is like this,
[
{
"name": "demo1",
"position": "demo1",
"information": "test1"
},
{
"name": "demo2",
"position": "demo2",
"information": "test2"
},
]
how can i add keyMembers in Edit view of refine ?
code:
export const CompanyEdit: React.FC = () => {
const {
refineCore: { onFinish, formLoading },
register,
control,
handleSubmit,
formState: { errors },
} = useForm();
return (
<Edit
title={<Typography variant="h5">Edit Company Details</Typography>}
saveButtonProps={{ size: "small" }}
isLoading={formLoading}
canDelete={false} footerButtons={ <> <SaveButton onClick={handleSubmit(onFinish)} /> </> } headerButtons={({ listButtonProps }) => ( <> {listButtonProps && ( <ListButton {...listButtonProps} meta={{ foo: "bar" }} /> )} </> )} > <Box component="form" sx={{ display: "flex", flexDirection: "column" }} autoComplete="off" > <TextField {...register("profile", { required: "This field is required", })} error={!!(errors as any)?.profile} // helperText={(errors as any)?.email?.message} margin="normal" fullWidth multiline InputLabelProps={{ shrink: true }} type="text" label="Profile" name="profile" />
</Box> </Edit> ); };
canDelete={false} footerButtons={ <> <SaveButton onClick={handleSubmit(onFinish)} /> </> } headerButtons={({ listButtonProps }) => ( <> {listButtonProps && ( <ListButton {...listButtonProps} meta={{ foo: "bar" }} /> )} </> )} > <Box component="form" sx={{ display: "flex", flexDirection: "column" }} autoComplete="off" > <TextField {...register("profile", { required: "This field is required", })} error={!!(errors as any)?.profile} // helperText={(errors as any)?.email?.message} margin="normal" fullWidth multiline InputLabelProps={{ shrink: true }} type="text" label="Profile" name="profile" />
</Box> </Edit> ); };
5 Replies
Hi @jenish7822. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To add a
keyMembers
field in the CompanyEdit
component, you can use the Controller
component from react-hook-form
to create a controlled component. However, the provided extracts do not include a specific example of handling an array of objects in a form.
Here's a general example of how you might add a keyMembers
field:
In this example, YourCustomArrayInputComponent
would be a component that you create to handle the input of an array of objects. This component would need to accept an array and provide a way for users to input multiple objects, each with name
, position
, and information
fields.
Unfortunately, the provided extracts do not include an example of such a component. You might need to create this component yourself or use a library that provides this functionality.
For more information on using the Controller
component with react-hook-form
, you can refer to the react-hook-form documentation (https://react-hook-form.com/api/usecontroller/controller).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@713646363425898567> kapa.ai is still learning and improving, please let us know how it did by reacting below
environmental-rose•14mo ago
Hi @jenish7822 , sorry for the late response. Is your problem solved ?
ambitious-aqua•14mo ago
Hi @alicanerdurmaz , yes i have figured out to solve this issue as suggested by bot
environmental-rose•14mo ago
I'm glad to hear that ✋