Passing props into custom component

gregwhitworth

12 months ago

So I am wanting to produce text content of varying nature to help structure the CMS a bit and provide a bit more insight to the user. It seems that the UI type doesn't allow me to pass props into it.

Here is my collection config:

{
      name: 'description',
      type: 'ui',
      admin: {
        components: {
          Field: FieldContent("hello")
        }
      }
    },

And here is the component, it's very basic right now because I'm just trying to get it wired up:

import React, {useState} from 'react';

import './index.scss';

const baseClass = 'customer-orders';

const FieldContent: React.FC = (props) => {  
  const text = props.text;

  return (
    <div className={baseClass}>
      {text}
    </div>
  );
};

export default FieldContent;

jarrod_not_jared
Payload Team
12 months ago
You should say Field: () => FieldContent({ text: “hello” }) 🙂
kaspartr
10 months ago
Can you access document or data in the Field argument also?

e.g. the following data is undefined but is it possible to pass in document data to custom component?

Ala in the following fashion
```
Field: ({ data }) => MyComponent({value: data.myFieldValue})
```
jarrod_not_jared
Payload Team
10 months ago
For that you would want to use the react hooks we expose to get the value of the field you want, read about our hooks here
https://payloadcms.com/docs/admin/hooks
kaspartr
10 months ago
Thank you, this works
and
its reactive. Good stuff 🙂
johnrisby
last month
I've just found this thread because I needed to do the same, and that works great except I'm having to manually pass the name, path and label to the component - can I send the custom props as additional props to the standard ones? (in this particular case, I'm extending a text field so using TextFieldType and extending that with my additional props. If I can't do it exactly that easily, inside the field definition instead of having to write out {name: "nameoffield", label:"labeloffield" ... etc, is there a way to set them there dynamically? thanks

jarrod_not_jared

Payload Team

last month

@johnrisby Yeah should work just like this:

Field: (fieldProps) => MyComponent({ ...fieldProps, myCustomProp: 'some-value' })

Then in your custom component you could do:

const { myCustomProp, ...rest } = props

// render Input component and pass `rest` props
// <Input {...rest} />

or you could key them onto something else like this:

Field: (fieldProps) => MyComponent({ fieldProps, myCustomProp: 'some-value' })

Then in your custom component you could do:

const { fieldProps, myCustomProp } = props

// render Input component and pass `rest` props
// <Input {...fieldProps} />

johnrisby
last month
that works perfectly, thanks Jarrod!

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.