I'm moving from v2.28.0 to 3.23.0 and previously I was passing a custom React component to field.admin.components.Field via an import into the collection's file. In Payload's v3 documentation, they show custom components being imported via a path. I've gotten the client component to render properly but the useAllFormFields hooks (previously imported from 'payload/componens/forms' and now imported from '@payloadcms/ui') returns an empty object. It seems as though the component isn't within the correct form context. The list of hooks in the docs is linked to a dead link. Not sure how to proceed, any help would be appreciated!
#Unable to fetch sibling field data within custom field component
short pine
cyan bronzeBOT
sudden creek
I have the same problem... I do not understand from the docs how to get siblingData or how to create a custom field. Any luck?
sudden creek
So, i did it with an afterInput component on a text field, i don't know if this helps you. Here is my example:
`import { Block } from 'payload'
const Maps: Block = {
slug: 'maps',
fields: [
{
type: 'text',
name: 'mapLocation',
admin: {
components: {
afterInput: ['@/blocks/Maps/components/MapFrame.tsx'],
},
},
},
],
}
export default Maps`
` 'use client'
import { useField } from '@payloadcms/ui'
export default function MapsField({ path }) {
const { value } = useField<string>({ path })
return (
<div>
<h5>Map View</h5>
<MapView value={value} />
</div>
)
}`
short pine
Thanks! Okay, I'll try that out, looks like it'll need to be on a per-field basis until the issue is resolved
sudden creek
Yeah, pretty much. I think more documentation is needed though 🙂
feral timber
u get the data using "useFormFields" siblingData object is not passed into custom component when using a client component
short pine
https://payloadcms.com/docs/admin/react-hooks
they updated the dead link as well!
short pine
I'm attempting to use useFormFields, but I'm getting undefined. I am using a client component and calling like in the docs const client = useFormFields(([fields]) => fields.client);.
@feral timber Have you been able to get it work?
feral timber
Yes take a look at this tutorial and project, link to source code in video description- https://youtu.be/EX_DeZtuOqc?feature=shared
