Use ArrayField inside Custom Components

default discord avatar
Eric17
8 months ago
6

I would like to use the ArrayField component inside my custom component. I already found this discussion on Github:

https://github.com/payloadcms/payload/discussions/1729

I tried the way which was used in the linked plugin-seo repo but for the ArrayField I get the error "props.admin is undefined". Has someone maybe already got this working?



Use ArrayField inside Custom Components

  • default discord avatar
    Alessio 🍣
    8 months ago

    Hey, if you have some time, could you share the code you already have? Optimally like explained here (even if it's not an issue):

    https://github.com/payloadcms/payload/blob/master/.github/reproduction-guide.md

    Would make it super easy for people like me to experiment with it & find a solution ^^

  • default discord avatar
    Eric17
    8 months ago

    Hey, thanks for your reply. In the meantime I was able to figure it out.

  • default discord avatar
    Alessio 🍣
    8 months ago

    Awesome!! What was your solution?

  • default discord avatar
    Eric17
    8 months ago

    I built a wrapper component for the ArrayInput which I imported manually from the dist folder. I am not sure if this is considered the right way but it works for now. To use the ArrayInput in my custom component I can now use it like this: " <CustomArrayField label={'Form 1'} name={'array-custom'} fields={[{ name: 'textfield-array-01', label: 'Text Field 1', type: 'text' }]} /> ". Using the original component directly did not work because it needs the fieldTypes property set (I just imported fieldTypes from the dist folder)



    I am still not sure what the path property is about. Does this influence the key in the database or why is it needed?

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.