Creating a custom view for editing a collection, I am able to update a field of the collection of type block, but I am not able to set initialData on <Form /> so that the current value is rendered. Here's how I am trying to achieve it:
import { Form } from 'payload/components/forms';
import { fieldTypes } from 'payload/dist/admin/components/forms/field-types';
import FieldBlocks from 'payload/dist/admin/components/forms/field-types/Blocks';
import ButtonSubmit from 'payload/dist/admin/components/forms/Submit';
import { BLOCKS_ARTICLE } from '../../../blocks';
import { API_CLIENT } from '../../../constants/api-client';
interface BlockRichText {
richText?: {
[k: string]: unknown;
}[];
id?: string;
blockName?: string;
blockType: 'rich-text';
interface CollectionEntityObjects {
id: string;
blocks?: (BlockRichText)[];
updatedAt: string;
createdAt: string;
}
interface Props {
entityObject: CollectionEntityObjects;
}
export function FormContent({ entityObject }: Props) {
const history = useHistory();
return (
<Form initialData={{ blocks: entityObject.blocks }}>
<FieldBlocks
name="blocks"
indexPath="blocks"
label="Blocks"
fieldTypes={fieldTypes}
blocks={BLOCKS_ARTICLE}
permissions={{ create: { permission: true }, update: { permission: true }, read: { permission: true } }}
admin={{ className: '' }}
/>
<ButtonSubmit type="submit">Save</ButtonSubmit>
</Form>
);
}
As a side note, not setting admin.className as a prop throws an error on the client-side.