rare-sapphire•2y ago

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> ); };

5 Replies

kapa.ai•2y ago

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:

import { Controller } from "react-hook-form";

// Inside your component
<Controller
  name="keyMembers"
  control={control}
  render={({ field }) => (
    <YourCustomArrayInputComponent {...field} />
  )}
/>

import { Controller } from "react-hook-form";

// Inside your component
<Controller
  name="keyMembers"
  control={control}
  render={({ field }) => (
    <YourCustomArrayInputComponent {...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: ----------------------

kapa.ai•2y ago

<@713646363425898567> kapa.ai is still learning and improving, please let us know how it did by reacting below

passive-yellow•17mo ago

Hi @jenish7822 , sorry for the late response. Is your problem solved ?

rare-sapphireOP•17mo ago

Hi @alicanerdurmaz , yes i have figured out to solve this issue as suggested by bot

passive-yellow•17mo ago

I'm glad to hear that ✋