The following code
import React from 'react';
import { useForm, Controller, useFieldArray } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { Select, MenuItem, TextField, Button } from '@mui/material';
import { DataGrid } from '@mui/x-data-grid';
import * as z from 'zod';
// Define Zod schema
const nestedSchema = z.object({
file: z.string().nonempty("File is required"),
start: z.string().nonempty("Start is required"),
value: z.string().nonempty("Value is required"),
delimiter: z.string().nonempty("Delimiter is required"),
});
const schema = z.object({
fieldId: z.string().nonempty("Field ID is required"),
fileName: z.string().nonempty("File Name is required"),
nestedArray: z.array(nestedSchema),
});
const App = () => {
const { control, handleSubmit, setValue, watch } = useForm({
resolver: zodResolver(schema),
defaultValues: {
fieldId: '',
fileName: '',
nestedArray: [{ file: '', start: '', value: '', delimiter: '' }],
},
});
const { fields, append } = useFieldArray({
control,
name: 'nestedArray',
});
const onSubmit = (data) => {
console.log(data);
};
const columns = [
{ field: 'fieldId', headerName: 'Field ID', width: 150 },
{ field: 'fileName', headerName: 'File Name', width: 150 },
{
field: 'nestedArray',
headerName: 'Nested Array',
width: 400,
renderCell: (params) => (
<div>
{params.value.map((item, index) => (
<div key={index}>
<Controller
name={`nestedArray.${index}.file`}
control={control}
render={({ field }) => (
<Select {...field} fullWidth>
<MenuItem value="">Select File</MenuItem>
<MenuItem value="file1">File 1</MenuItem>
<MenuItem value="file2">File 2</MenuItem>
</Select>
)}
/>
<Controller
name={`nestedArray.${index}.start`}
control={control}
render={({ field }) => (
<Select {...field} fullWidth>
<MenuItem value="">Select Start</MenuItem>
<MenuItem value="start1">Start 1</MenuItem>
<MenuItem value="start2">Start 2</MenuItem>
</Select>
)}
/>
<Controller
name={`nestedArray.${index}.value`}
control={control}
render={({ field }) => (
<TextField
{...field}
label="Value"
fullWidth
value={field.value || ''}
onChange={(e) => field.onChange(e.target.value)}
/>
)}
/>
<Controller
name={`nestedArray.${index}.delimiter`}
control={control}
render={({ field }) => (
<TextField
{...field}
label="Delimiter"
fullWidth
value={field.value || ''}
onChange={(e) => field.onChange(e.target.value)}
/>
)}
/>
</div>
))}
</div>
),
},
];
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Controller
name="fieldId"
control={control}
render={({ field }) => (
<Select {...field} fullWidth>
<MenuItem value="">Select Field ID</MenuItem>
<MenuItem value="field1">Field 1</MenuItem>
<MenuItem value="field2">Field 2</MenuItem>
</Select>
)}
/>
<Controller
name="fileName"
control={control}
render={({ field }) => (
<TextField {...field} label="File Name" fullWidth />
)}
/>
{fields.map((item, index) => (
<div key={item.id}>
<Controller
name={`nestedArray.${index}.file`}
control={control}
render={({ field }) => (
<Select {...field} fullWidth>
<MenuItem value="">Select File</MenuItem>
<MenuItem value="file1">File 1</MenuItem>
<MenuItem value="file2">File 2</MenuItem>
</Select>
)}
/>
<Controller
name={`nestedArray.${index}.start`}
control={control}
render={({ field }) => (
<Select {...field} fullWidth>
<MenuItem value="">Select Start</MenuItem>
<MenuItem value="start1">Start 1</MenuItem>
<MenuItem value="start2">Start 2</MenuItem>
</Select>
)}
/>
<Controller
name={`nestedArray.${index}.value`}
control={control}
render={({ field }) => (
<TextField
{...field}
label="Value"
fullWidth
value={field.value || ''}
onChange={(e) => field.onChange(e.target.value)}
/>
)}
/>
<Controller
name={`nestedArray.${index}.delimiter`}
control={control}
render={({ field }) => (
<TextField
{...field}
label="Delimiter"
fullWidth
value={field.value || ''}
onChange={(e) => field.onChange(e.target.value)}
/>
)}
/>
</div>
))}
<Button type="button" onClick={() => append({ file: '', start: '', value: '', delimiter: '' })}>
Add Nested Field
</Button>
<Button type="submit">Submit</Button>
<div style={{ height: 400, width: '100%' }}>
<DataGrid
columns={columns}
rows={[
{
id: 1,
fieldId: '',
fileName: '',
nestedArray: fields,
},
]}
pageSize={5}
/>
</div>
</form>
);
};
export default App;
from above code Nested array fields we would be displaying them in MUI data grid in the form rows..
Now here nested Array of fields which are file and start were Mui select drop whenever the user changes the value it is able to render the MUi select but problem with field of value and delimiter where it has MUI text field like input field whenever the user enter value ..entered value getting disappearing from MUI text fields of Value and Delimiter ,even i have put console statement onchange those are not printing and also MUI text field were not rendering ?